Unfortunately the eighth incarnation of a certain browser from Redmond has issues with
max-height in conjunction with
overflow: auto – under certain circumstances, it causes the issue you see. Until recently we had disabled
max-height on IE8 (because of a different issue that seems since fixed).
So we can either put that hack back in, causing giant walls of text again, or not do it, and cause Narwhal aquariums.
Or… why not try an even uglier hack!
some testing, I found that giving the
max-height to the element inside the
<pre>, and not to the
<pre> itself, actually works.
However, this means that a) we need a wrapper element inside the
<pre>, and b) that wrapper needs to be
display: block (and
overflow: visible, but that's default). And we're certainly not rebuilding the HTML of every post ever made to work around an IE8 bug.
Fortunately, any Markdown-created codeblock (i.e. 4-space indent) does have that wrapper: Codeblocks are always
<pre><code>. So we can do something at least for those blocks (which obviously are the vast majority).
Unfortunately, this may break when someone writes their own HTML like this:
– but I'm making the assumption that no-one does that.
The best thing would be to apply this CSS hack only to
<pre><code>...</code></pre>, but unfortunately IE8 doesn't support the
pre > code:only-child-not-even-any-text-node-siblings selector, so the best we can do is
This will be in the CSS after the next build:
.post-text pre > code:first-child
This is ugly as hell, and it causes my contrived example above to break (it grows a newline), but I'm willing to give it a try, since it fixes a majority of these cases.
\9 thingadongdongs are a browser hack to make these rules only count in IE8, so other browsers aren't impacted by this.
If it causes other issues again, I'm afraid we have to go back to the giant walls of text.