I'm using jQuery .scrollTop to scroll image within a div. It works great in Firefox - scrolling is very smooth and fast. In IE 8 scrolling is very slow and glitchy - image scrolls once in about a second - two seconds. Image size is on average between 2000 * 2000 and 4000 * 4000 pixels.

Is there a way to improve this for IE 8?

Performance in IE 7 is slightly better, but still not good enough.

Thank you

Edit: I believe that an issue is in how scrolling is implemented in IE 7 and 8. I have enabled both scroll bars (overflow-x and overflow-y), and I have tried scrolling an image using these scroll bars. Issue is exactly the same. I've tried running this on a fairly underpowered PC - pentium dual core few years old with 2 GB of RAM as well as Core i7 desktop with 2.8GHz CPU 1600Mhz RAM and the results are nearly identical. FireFox scrolls a lot faster, however its CPU usage on average is 10% higher than IE CPU usage. This leaves me puzzled...surely Microsoft would have addressed this issue by now?

Another thing that I have found slightly odd is that scrolling ran faster on a Core 2 Duo laptop. I'm wondering whether this has anything to do with graphics card drivers...does IE 7/8 even make a use of GPU?

Excuse me if any of this sounds silly, but I'm really interested in solving this problem...IE can't be that bad..

I'm using jQuery .scrollTop to scroll image within a div. It works great in Firefox - scrolling is very smooth and fast. In IE 8 scrolling is very slow and glitchy - image scrolls once in about a second - two seconds. Image size is on average between 2000 * 2000 and 4000 * 4000 pixels.

Is there a way to improve this for IE 8?

Performance in IE 7 is slightly better, but still not good enough.

Thank you

Edit: I believe that an issue is in how scrolling is implemented in IE 7 and 8. I have enabled both scroll bars (overflow-x and overflow-y), and I have tried scrolling an image using these scroll bars. Issue is exactly the same. I've tried running this on a fairly underpowered PC - pentium dual core few years old with 2 GB of RAM as well as Core i7 desktop with 2.8GHz CPU 1600Mhz RAM and the results are nearly identical. FireFox scrolls a lot faster, however its CPU usage on average is 10% higher than IE CPU usage. This leaves me puzzled...surely Microsoft would have addressed this issue by now?

Another thing that I have found slightly odd is that scrolling ran faster on a Core 2 Duo laptop. I'm wondering whether this has anything to do with graphics card drivers...does IE 7/8 even make a use of GPU?

Excuse me if any of this sounds silly, but I'm really interested in solving this problem...IE can't be that bad..

• javascript
• jquery
• internet-explorer-8
• internet-explorer-7

Share Improve this question Follow edited Dec 6, 2010 at 23:20 asked Dec 6, 2010 at 15:55 user338195user338195 2

• I don't know of an immediate answer to your question but obviously the performance is going to be based on the specs of the client machine - In this instance, I suspect memory and paging will be the bottleneck. To confirm it's an issue related to the size of the image, do narrow (1-2px) but tall images have the same issue? – Basic Commented Dec 6, 2010 at 16:07
• Hi, this runs fine on any average Core 2 duo with 2gb ram and integrated graphics card. I don't think that performance of a machine is an issue, especially because it runs at least twice as fast in FireFox. – user338195 Commented Dec 6, 2010 at 16:24

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

jQuery's .scrollTop() is notoriously slow in ie, and if the markup is even slightly plex or large, you'll never get it to perform well.

The solution is to not use the jQuery .scrollTop() function, but build your own based on the native properties .scrollHeight and .scrollTop.

The reason is the way ie putes offsets, which is the base of jquery's .scrollTop() slowness - you have to walk up the DOM tree and calculate offsets for every parent in ie.

jQuery does this the best it can, but you will always be able to do it faster since you know the markup in advance and can optimize this - you can even do the offset calculations in advance most of the time and just use a constant as modifier.

All that said, this might not be jQuery's fault - it can simply be a problem with ie's rendering pipeline - depending on how you made your marklup and styling of it, a scroll might force ie to pletely rerender/repaint the page for every pixel you scroll, and that will slow it all down to a crawl.