Internet Explorer strikes again

Internet Explorer has a way of driving web developers up the wall.  Every version has its own glut of bugs and quirks, some just irritating and some downright bizarre.   It's one of those bizarre ones that I've been looking at over the last few days – specifically in Internet Explorer 7, the major browser of our end users. The screen in question is an editable version (which I can't show due to authentication issues) of this reading list.  When it goes into edit mode a side panel slides in from the right and you get a library of bookmarks that you can drag onto the list in whatever position you want.  You can also drag in a new section or existing items and sections around on the list.  With the complexity of what is going on there were always going to be a few cross-browser issues but one in particular was so severe we had to disable editing in IE until the problem was found and resolved. The symptoms were that when new items or sections were dragged onto a list you'd get a flickering hourglass, CPU usage up to 96% and it would either be unreliable or impossible to drop it in the right place on the list.  If you started off with a new blank list, the first few items would be OK (up to about 4) then the hourglass flicker would start, by the time you got to 7 or 8 it was getting really hard to drop an item and by the time you hit about 10-12 it was impossible to use.  Firefox worked fine and Internet Explorer 8 (RC1, not tried in the newly released full IE8 yet) also worked fine. Several thoughts crossed my mind when first looking into this:  was it my (JavaScript) code, was it one of the third-party libraries being used (Prototype & Scriptaculous) or was it something else?  I certainly didn't imagine at the start that it was just down to the CSS… Once the code and the libraries were ruled out it ended up being a trawl of Google to see what I could find. The first thing uncovered was from a passing comment on Steve Souder's blog post on "Performance Impact of CSS Selectors".  Steve made passing comment to the performance impact on using CSS 'hover' pseudo-selectors.  We were using those on each item on the list to show/hide edit and delete buttons.  So, I removed the hover selectors and there was an improvement but no magic bullet. More digging around ensued and point 41 this list of IE bugs was found.  This was very close to what I was seeing.  A scrolling layer and a problem that maxes the CPU in IE7.   It then became noticeable that in IE7 I was reliably getting the problem at a certain point when dragging items onto the list.  When the number of items dragged over filled the visible space on the scrolling list, the next item dragged would always start to produce the flickering hourglass and CPU peaking.  I also noticed that the vertical scrollbar on the pane was not sizing correctly.  If you scrolled up and down using the scroll-wheel on the mouse the scrollbar would sort itself out and then next item you dragged across would work OK.   Interesting… More Googling later and I found a similar reference on the MSDN.  This described that problem and pointed at a CSS sizing issue causing a problem in IE.  I tidied up the CSS a bit and added a 'min-height' to a few of the selectors and, hey-presto, no flickering hourglass when dragging items across and no strange resizing scrollbar. So, if anyone else gets anything similar to this then I hope this post helps.  It's driven me nuts for a good few days now.   IE always surprises me (by how bad it is), but I never initially thought that some basic CSS could happily cause IE to go into such a bad CPU spike that it could actually crash the browser – amazing! Now that the problem of making it work in IE7 is well on the way to being fixed I now have to improve the performance on large lists (ABF203, above, is a tiny example compared to some we have).  It'll be back to Steve's great work in this field for pointers on this.

Leave a Reply

Your email address will not be published. Required fields are marked *