Why is display:inline killing IE 8.0 performance?

Posted by monstermensch on Stack Overflow See other posts from Stack Overflow or by monstermensch
Published on 2010-05-17T15:14:14Z Indexed on 2010/05/17 16:00 UTC
Read the original article Hit count: 250

I have an image gallery based on this jQuery plugin:

http://jqueryfordesigners.com/demo/slider-gallery.html

This works really well in Firefox, Chrome and even IE 7.0, but when I try it with more than 50 images in IE 8.0 the performance is incredible slow. Just hovering over the thumbnail brings the CPU load to 100%.

At first I thought it's a Javascript problem, so I used the IE profiler, but the results were normal. Next I checked the CSS and finally found the cause:

.sliderGallery UL LI { display: inline; }

This gets the thumbnails to align horizontally. If I chance it to display:block, performance is fine and the scroller is still working but obviously it looks funny, because the thumbs are aligned vertically.

My questions:

  1. Why does IE 8 have this problem with many display:inline elements
  2. What can I do to solve it

I'll gladly provide more information if necessary.

© Stack Overflow or respective owner

Related posts about css

Related posts about internet-explorer-8