CODEWITHSUNDEEP
htmlcssinternet-explorerinternet-explorer-9
MaxArt
MaxArt

Reputation: 22627

Why does IE9 keeps repainting the page, causing unresponsiveness?

We've developed a web application that shows quite a bit of data in a somewhat fancy interface with a table. I can't show the page, but it has quite a big table, inside a fixed positioned element, with some images (mostly icons smaller than 2KB, PNGs with alpha transparency, and no more than 30 different images).

It's not that heavy, with less than 1000 elements in the page. It was developed mainly in Chrome, and works flawlessly in Chrome. And IE11, and IE10.

But when it comes to IE9, this happens: IE9 keeps repainting the page Yes, that's IE11, because it offers decent analyzing tools. I'm using IE9 emulation, but that same unresponsiveness happens with IE10 in IE9 mode, and with "native" IE9, with high CPU usage - but steady memory usage.

In a lighter way, it happens in IE8 too: enter image description here But the repainting takes much less time (perhaps it repaints smaller parts of the page?) and the responsiveness isn't compromised.

As you can see, no script is running, just some random garbage collection. In IE10, IE11 and Chrome there's no repaint involved.

If I disable the images (did this in IE10, don't know how to do that in IE11), IE9 doesn't keep repainting, but if I disable or hide all the images through the style sheets it keeps hogging the CPU. Disabling hardware acceleration makes things even worse, as expected.

What may cause this odd behaviour in IE9 (and partially IE8)?

Upvotes: 4

Views: 306

Answers (1)

MaxArt
MaxArt

Reputation: 22627

After a lot of investigations, I think I've found the culprit.

It seems to be a problem related to animated GIFs. Whether it's a <img> element, or set as a background image, or as the content of a pseudo-element, even after it was removed from the DOM the browser keeps on repainting the same portion of the page.

This can be a very intensive task, not only in older computers, especially when using larger GIFs. But even when using smaller ones, if the GIF is used as a background image or in a pseudo-element, IE9 repaints the whole area of the element, rather than just the area of the image.

That's why it keeps on repainting a huge area of 1750x1051 pixels in the screenshot. And I just used a crappy 64x64 spinner!

So... beware of spinners. And IE9.

Solution

I haven't found a simple and definitive solution yet (except ditching IE9 altogether). The first thing to avoid is using animated GIFs in background images and pseudo-elements.

If you have to show a spinner in IE9, you can either use a small one, or a static image. Alas, you have to animate it yourself because IE9 doesn't support CSS animations. And you can't rely on requestAnimationFrame either, just setInterval.

I just hope you can take advantage of jQuery. I couldn't...

For some reason, IE8 deals with animated GIFs much better, even if it's still not perfect.

Upvotes: 3

Related Questions