Email conversation
| From | Hilbrand Edskes |
|---|
| To | Me |
|---|
| Subject | IE8 overflow and expanding box bugs |
|---|
| Date | 14 May 2009 19:07 |
|---|
Hi,
I'm the author of [marketing information]
Today I've found a couple of very weird bugs in Internet Explorer 8.
One of these bugs causes the entire page to disappear when using "overflow:
scroll".
Other bugs I discovered cause boxes to expand even when a (max-)width and/or
(max-)height have been explicitly set.
[URL]
Best Regards,
Hilbrand Edskes
| From | Me |
|---|
| To | Hilbrand Edskes |
|---|
| Subject | Re: IE8 overflow and expanding box bugs |
|---|
| Date | 16 May 2009 16:03 |
|---|
Hilbrand,
> One of these bugs causes the entire page to disappear when using
> "overflow: scroll".
For most users, IE 8 will notice that it made this mistake, and
immediately switch to using the IE 7 engine (I notice you have used the
meta tag to force it to use the IE 8 engine, so that it remains blank).
They built that in intentionally, and hoped that they would have all
such bugs fixed before release. Seems they missed one. Nice find.
> Other bugs I discovered cause boxes to expand even when a (max-)width
> and/or (max-)height have been explicitly set.
Indeed, it seems to come down to two simple things: scrollbar height is
added onto max-height instead of subtracted from it, and max-width fails on
auto-overflow with floats (if there is also a vertical scrollbar). The last
demo is a combination of these two.
Incidentally, while making minimal testcases for those, I also noticed
another bug; max-height is treated as height on elements that have
scrollbars.
By the way, you have over-engineered a couple of your demos - they do not
require as many styles as you have used:
> float: left; max-height: 200px; max-width: 100px; overflow: auto
This happens with regular height, not just max-height.
> min-height: 200px; width: 100px; overflow: auto
width is not needed. Only overflow and max-height are needed.
Some really nice finds there. Well done for finding them (or commiserations
for having had them break your pages).
Mark 'Tarquin' Wilton-Jones - author of http://www.howtocreate.co.uk/
| From | Hilbrand Edskes |
|---|
| To | Me |
|---|
| Subject | Re: IE8 overflow and expanding box bugs |
|---|
| Date | 16 May 2009 16:25 |
|---|
>> One of these bugs causes the entire page to disappear when using
>> "overflow: scroll".
>
> For most users, IE 8 will notice that it made this mistake, and
> immediately switch to using the IE 7 engine [...] Nice find.
Thank you.
The fallback to Compatibility View can indeed happen in the minimal test
case when the META element (or forced Standards Mode in the HTTP Header)
isn't included, but certainly not always.
I found all these bugs when working on a web application - which doesn't
force Standards Mode - that used boxes filled with dynamic content, which -
as can be seen on [URL] - in IE8 incorrectly expand, due to the added
scrollbar at the bottom of the box, when they're filled with content.
To fix this, I tried overflow: scroll on them, so they would always show the
scrollbars and therefore would all have the same size again. But (to my
surprise) this triggered the blank page bug.
I don't know what exactly causes the fallback to Compatibility View, but I
do know that it doesn't happen in my web application (which is probably more
realistic then the minimal test case), while it doesn't force Standards
Mode.
So there must be something else in my web application that prevents the
fallback to Compatibility View while still triggering the blank page bug,
making this bug more serious for real life situations.
>> Other bugs I discovered cause boxes to expand even when a (max-)width
>> and/or (max-)height have been explicitly set.
>
> Indeed, it seems to come down to two simple things: [...]
I think that's correct.
> The last demo is a combination of these two.
The "click on the text to solve the height bug for that box" is new in the
combination.
> Incidentally, while making minimal testcases for those, I also noticed
> another bug; max-height is treated as height on elements that have
> scrollbars.
What exactly do you mean by that (what's the result of that)?
> By the way, you have over-engineered a couple of your demos - they do not
> require as many styles as you have used: [...]
Which bugs are you referring to?
I thought my minimal test cases already were as short as possible.
[URL]
[URL]
[URL]
[URL]
> Some really nice finds there. Well done for finding them (or
> commiserations for having had them break your pages).
Thank you.
Best Regards,
Hilbrand Edskes
| From | Me |
|---|
| To | Hilbrand Edskes |
|---|
| Subject | Re: IE8 overflow and expanding box bugs |
|---|
| Date | 16 May 2009 16:51 |
|---|
Hilbrand,
>> Incidentally, while making minimal testcases for those, I also noticed
>> another bug; max-height is treated as height on elements that have
>> scrollbars.
>
> What exactly do you mean by that (what's the result of that)?
Apply overflow:scroll and max-height:200px to an element, and give it just
one line of content. Any good browser will make the element just one line
high, with scrollbars on it. IE 8 makes it 200px high.
http://www.howtocreate.co.uk/ieBugs/maxheightasheight.html
>> By the way, you have over-engineered a couple of your demos - they do not
>> require as many styles as you have used:
>
> Which bugs are you referring to?
On this page:
[URL]
you give details of "only n CSS rules are needed to trigger this bug". Those
are what I was referring to.
> [URL]
This uses the styles I would expect, but the main article says it uses
max-height (from the highlighting, you may have been trying to say that
either height or max-height will trigger the bug).
> [URL]
This does not need width. The bug occurs even if width is not set, as shown
in my testcase:
http://www.howtocreate.co.uk/ieBugs/maxheightscroll.html
Tarquin
| From | Hilbrand Edskes |
|---|
| To | Me |
|---|
| Subject | Re: IE8 overflow and expanding box bugs |
|---|
| Date | 17 May 2009 12:00 |
|---|
> http://www.howtocreate.co.uk/ieBugs/maxheightasheight.html
Your test case also displays red in Firefox, because the vertical scrollbar
causes a min-height for the box which is taller then your single line of
text.
This can be fixed by either adding more lines of text or using overflow-x
instead of just overflow.
[URL]
>> [URL]
>
> This uses the styles I would expect, but the main article says it uses
> max-height
I've tried to make this more clear by extending the descriptions and adding
more comments to the minimal test cases.
>> [URL]
>
> This does not need width. The bug occurs even if width is not set, as
> shown in my testcase:
> http://www.howtocreate.co.uk/ieBugs/maxheightscroll.html
The word FAIL does appear below the text in Firefox, because Firefox doesn't
show the scrollbars.
Instead of max-height: 1em; you should use max-height: 17px;
or better: change FAIL to <br>FAIL and use max-height: 2.2em;
This bug is also triggered when using only overflow-x: scroll;
(or overflow(-x): auto; when combined with overflowing content)
Best Regards,
Hilbrand Edskes
| From | Me |
|---|
| To | Hilbrand Edskes |
|---|
| Subject | Re: IE8 overflow and expanding box bugs |
|---|
| Date | 17 May 2009 15:44 |
|---|
Hilbrand,
>> http://www.howtocreate.co.uk/ieBugs/maxheightasheight.html
>
> Your test case also displays red in Firefox
Indeed, but this is a bug caused by a scrolling UI limitation in Firefox.
The height should shrink to fit the contents, but in Firefox, it shrinks to
fit the scrolling UI instead. At least it's not as bad as IE's bug, but it
is still a bug. I certainly would not want to alter the testcase to hide the
fact that Firefox also has a bug, especially not when it could easily affect
a real Web page.
>> http://www.howtocreate.co.uk/ieBugs/maxheightscroll.html
>
> The word FAIL does appear below the text in Firefox
Firefox 3.0 and 3.5 get it right here. Neither show a FAIL (and it certainly
should not fail in any case, so if you see a fail, report it as a bug).
Testcases are usually built assuming defaults, and in this case, 1em is
16px, so using 17px would not make any difference. The use of ems is very
much intentional, as it should still cause a significant overlap no matter
what font settings the browser is using. When a testcase is dependent on UI
(scrollbars are ui, and not all browsers support them), it is built for the
browser it is testing. The tests are designed for IE, and expect IE's
defaults. If other browsers fail, the QA for that browser can decide if they
should also consider it a bug.
> Firefox doesn't show the scrollbars
The CSS demands scrollbars. Failure to show scrollbars would be a spec
violation, and a very definite bug. However, I see scrollbars here in
Firefox 3 and 3.5, so I cannot confirm that bug.
[Correction:]
OK, turns out I can reproduce it when using the XP Luna style, but not when
using Windows classic style. The scrollbar thickness is 16px in classic
style.
All other browsers (including IE 7) survive in either case. Firefox is the
only one with this bug.
Tarquin