Dave Johnson

I have spent the better part of the past week fighting with the Internet Explorer 31 stylesheets limit.

http://flickr.com/photos/cassidy/2461135/

It came up when, thanks to the great performance of our Grid component, a customer wanted to have about 35 grids on a single page for a very complex ordering system. Now as is usually the case, by the time that people come to us to help them they usually have a pretty firm business case for their application and don’t want to change the overall information architecture and the like - so we had to figure out how to get 35 grids running in Internet Explorer.

The problem arises from the fact that for a live scrolling grid where blocks of data are dynamically inserted into the page as the user scrolls, each grid needs its own stylesheet since the column widths and a few other parameters are defined on a grid/column basis and need to be changed globally in a lot of cases; for example, when a column is resized we need to be able to just change one CSS rule and have the widths of all the relevant HTML nodes get updated.

The worst part is that there is even a difference between IE 6 and IE 7 - w00t. In IE 7 it has no problem with just creating one stylesheet and continually appending or overwriting that stylesheet. So that was a pretty easy fix to have a global stylesheet instead of one for each grid. Then comes IE 6… in IE 6 it seems that you can’t even write to the same stylesheet object more than 31 times (or some number around 31 I am not really sure).

So what was the solution for IE 6? We essentially had to make a registry of all the components on the page that keeps track of which components were done initializing and then when all the components are ready create one huge stylesheet and write the contents only that one time. Failing to use this approach meant that IE 6 would just crash.

The other approach that we of course considered was using addRule on the stylesheet object to inject each of the CSS rules into an existing stylesheet rather than writing the stylesheet. I quickly learned that addRule is ridiculously slow in IE. Something like on the order of 30ms to add a rule. So ~35 grids * 50 columns per grid * 30ms per addRule = way too long. Retarded.

We now almost have everything working with > 31 grids. Joy.

Del.icio.us

This entry was posted on Tuesday, February 19th, 2008 at 2:02 pm and is filed under AJAX, CSS, InternetExplorer, JavaScript, quirks. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.