entropia

By now we’ve all had a chance to try out IE8, and we’ve all found quirks, bugs, and pages that don’t quite work right. PPK has a summary of CSS issues. John Resig talks about JavaScript. Erik Arvidsson gives his impressions. I’m sure there’s plenty more out there.

I’ve found a few interesting things myself. Navigation on sites like Sourceforge and Codeplex doesn’t look right. MSN TV listings don’t work. But the biggest issues I’ve seen are with my raycaster.

There are basically 3 causes of the problem: opacity, overflow, and zIndex. IE has never done opacity the same way as Firefox or other browsers; it uses filter: alpha(opacity=50) instead of opacity: 0.5. IE8 doesn’t seem to have any opacity support at all.

More noticable is overflow. I was using large spritemaps for the enemies, which were clipped to show a single sprite¹. So the Sarge sprites are all in a single image file, and different parts of the image are shown for different individual sprites. In IE8, the images wouldn’t clip and the entire spritemap would be shown.

I made a CSS overflow test to pinpoint exactly what the problem is. I was using absolutely positioned imgs in a relatively positioned div. In Firefox and IE7, the children of relatively positioned elements are clipped, but not in IE8.

To fix it, I’m using a staticly positioned div for the container, and positioning all the content (walls, sprites, and sky) relatively.

The third problem is with z-index, for which I made a CSS z-index test. In IE7, there was no interleaving of children of siblings. So if 2 adjacent nodes, A and B, each have children with different z-indexes, there is no way for A’s children to be layered between B’s. Either all of A’s children are in front of B’s children, or they are all behind B’s children. And it all depends on A and B’s z-indexes, not their children’s. In Firefox and IE8 there can be interleaving if the z-indexes of the parents aren’t set. Also in IE8, there can be interleaving if the z-indexes of the parent are set to 0.

For more about IE8’s CSS handling, there’s the Windows Internet Explorer Testing Center and CSS Improvements in Internet Explorer 8.

1. I did this so that only a few images needed to be downloaded. Instead of one for every frame and angle for each enemy, there is just a single image for each enemy type [↩]