IE8: Same version equals different rendering?Apr 14, 2010
In what amounts to further evidence that linking the browser against the operating system is a Bad Idea, I came across this fun issue which affects installations of IE8 residing on Windows XP service pack 2 (SP2).
At this link is an absolutely positioned unordered list (
<ul>) which has been given the CSS clip property:
clip:rect(0px, 1000px, 1000px, 0px). In plain English, the clip rule says: Clip the top and left edges of the element right to the box border (0px), and allow things to extend out of the element up to 1000 pixels on the right and bottom sides before clipping.
The list element has child list elements which appear fly-out-menu style to the right and downwards. The clip value above should allow these menus to appear up to 1000px beyond the right and bottom borders of the parent box. Below is what we see in IE8 SP2 when in standards mode (left) and compatibility mode (right):
You can see that IE8 is ignoring the numerical values in standards mode and just clipping right to the four edges of the box, which clips away most of the sub-menu elements from view. Switching to compatibility mode brings the hidden elements back, presumably by restoring proper behaviour of the CSS
It turned out that every value of the clip property I gave to IE8 caused this undesirable clipping behaviour, even
clip:auto which should remove all clipping (the WebKit engine also has this problem). The solution required preventing IE8 from seeing the clip property at all, by putting them in their own stylesheet and wrapping the
<link> element in
[if !IE] conditional comments.
I was lamenting about this unfortunate behaviour, and its ugly fix, to TarquinWJ when he gleefully reported that it worked properly in his IE8, in both standard and compatibility mode. We compared our IE version numbers, which were identical, but discovered that our XP service pack level differed. I was still using service pack 2, whilst he had already upgraded to service pack 3.
This couldn't be it, could it? More testing on different machines of both service packs seems to confirm, however, that this is indeed the case. Windows XP service pack 3 corrects the CSS clip rendering in standards mode, while the IE8 version number remains the same. Mind boggling, to say the least. Both images below came from the same version of IE8 (8.0.6001.18702) in standards mode; the only difference was the Win XP service pack level.
Come on now, seriously? What are the implications of this?
Very poor form here Microsoft. If IE8 wasn't linked to the operating system, and instead was an isolated program like every other mainstream browser, these issues would never arise. Service pack upgrades should have no effect on the IE browser; it should be updated as a completely separate program. Fixing browser rendering issues via service pack is akin to sneaking fixes in through the back door, leaving developers no way to fork their code to account for both behaviours.
Indeed the only way developers would find out that the behaviour was changed at all is by accidental discovery, as we have done here. Hey IE team, thanks for wasting our time with a treasure hunt. Can we get back to making webpages now?
Hopefully we see an end to issues like these in IE9, but let me assure you that I'm not holding my breath.
Thanks to TarquinWJ for providing invaluable testing while I was preparing this article.
|⇐ Help change HTML5 for the better||Sweet CSS3 buttons that you can't use... yet ⇒|