So here’s what may be a crazy new IE8 CSS bug that can be triggered under the right circumstances. At MothersClick we started to get a few bug reports about “my browser crashing” when viewing the site. As hard as we could try, we couldn’t get the site to crash any of the browsers we tried. Then with a brand new, clean install of IE8, Nick Robillard was able to get the site to crash and we finally had a reproducible crash on our hands.
My first reaction: WTF. (maybe these should be updated to be just IE in general)
That meant it had to be some obscure HTML or even CSS? Reminds of 1 line IE6 bombers.
With much digging around we finally found it: a lone CSS3 selector that Internet Explorer has supported since version 5 crashing the site:
word-wrap: break-word; /* A very nice CSS3 property, well not always */
Removed that and voila, no more crashing!
But that doesn’t make sense. That selector works on other sites, why not this one?
Looking through the CSS and HTML my hypothesis is:
Some combination of floated elements, with relative positioning, and background images, in conjunction with the word-wrap CSS property applied to text within those elements, triggers some sort of cosmetic IE meltdown
While this hypothesis isn’t really that exact and no where near as comprehensive as the excellent cross browser bug reports at Position Is Everything, I hope it gives someone else enough ammo to figure out the basic use case that triggers this. I don’t think I have any hair left to proceed to figure out why :)