GreyWyvern.com

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):

Image

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 clip property.

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.

Image

Come on now, seriously? What are the implications of this?

Well, not only do we as web authors need to test our pages in the multitude of IE versions, now we also need to account for the user's XP service pack, in case the rendering behaviour differs between them. ... ! The final insult is that there is no other (non-javascript) way to find the user's service pack and operating system except by parsing the User Agent string. The version numbers are the same, they follow the same conditional comments... it's either sniff, or disallow affected versions of IE from seeing the CSS that behaves differently between service packs.

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

Comments closed

Recent posts

  1. Iguana no Musume / Iguana Girl Aug 2016
  2. What I'd Like To See In The Elder Scrolls VI - Part 2 Aug 2015
  3. What I'd Like To See In The Elder Scrolls VI Jul 2015
  4. Cyprus, and what capitalists want Mar 2013
  5. Let interest rates on housing rise Sep 2012
  6. Archive

Items of Interest

Webcomics Reading List

Good Eats

Twitter RSS 2.0 Valid XHTML 1.0! Copyright © 2017 Brian Huisman AKA GreyWyvern
ContactSite mapSearch