Chrome 24 vs IE10 Scrolling Horrible Lag

Question

I am currently developing a web application focusing primarily on Chrome 24.01312.57 and IE10. In the former browser, I am experiencing a large amount of lag. However, the latter experiences little to no lag, which is quite opposite to what everyone claims.

To show you the difference, I am recording the screens of my netbook using an iPhone while scrolling down The Chrome Webstore - something Google itself created.

Testing Equipment

1. 2 year old Gateway Netbook -Single Core Intel Atom - 1GB RAM - Win7
2. iPhone camera (not that great recording solution, but it is quite easy to spot the difference)
3. Website: https://chrome.google.com/webstore/category/home (I scrolled down quite a bit for both the browsers before starting the test for those worried of AJAX loaded content slowing down the rendering)

Results

1. Google Chrome 24 (No extensions) scrolling down the Webstore: http://www.youtube.com/watch?v=njkRqiNJPIY
2. Internet Explorer (No addons) 10 on the same page:http://www.youtube.com/watch?v=B_E_9OzPers

Note: Look at the mouse cursor and the scroll thumb - on IE10, the mouse is always on the the thumb whereas Chrome, it is all over the place indicating a high latency between mouse movement and the actual rendering.

Bottom Line:

Before I conclude, do realize that these lags on Google Chrome are increasingly magnified as the website becomes more complex and/or the specs go lower. However, IE10 is pushing the FPS quite high even in these conditions. I also did some analysis of the Chrome timeline. In reveals that the FPS drops as you zoom out to the point where rendering takes up to ~900ms per frame (on the Google Webstore) while IE10 is still fluid smooth (and better yet it retains that smoothness on an atom netbook)

1. As web developers, is there some CSS property/ies that is causing Chrome to render the pages with lag?
2. Why is Internet Explorer rendering so quickly?
3. What can be some steps to make Chrome render as quickly as IE10?

PS: Bug Report: http://code.google.com/p/chromium/issues/detail?id=163092 but no recent developments on this currently.

Answer 1

Chrome struggles with painting, especially at high resolutions such as 2560x1440 and above. Many websites such as the Chrome Web Store, Facebook, etc. exhibit significant scroll lag on it. IE10 maintains 120 fps on my monitor while scrolling on these sites.

Answer 2

I just had and fixed a similar issue.

Apparently Chrome isn't too smart about their recalculation of styles, besides that being terribly slow, so I focused on preventing it from recalculating anything.

I added the 'scrolled' class whenever the scroll event was triggered, but if it was already there, Chrome kept recalculating the new styles anyway. When I modified it to be like:

if (!body.hasClass('scrolled')) { body.addClass('scrolled'); }

Chrome suddenly experienced a significant speedup (still no IE or FF, but much better than before)