Question

I’m working on a site with lots of CSS3 transitions (which are hardware accelerated) and high memory objects (for example, an array of 39 objects, each containing the full html source for a typical online news article) and I’m noticing some very choppy/jittery scrolling, which I’ve been unable to debug.

I’ve kept these high memory objects out of the DOM, which should prevent them from affecting DOM performance, however, I can’t help but think that they are still having a negative effect. I don’t have code samples to post because I’m unsure of whether this is even an issue.

Please go to this site (Orange) and click on an article tile. In the reader div that pops up over the page, try scrolling as you normally would. Does it feel choppy/jittery? Do you have any suggestions on how to improve this?

Answer 1

CSS3 transitions, opacity, text and box-shadows and the like are certainly known to impact rendering speeds. In fact, even sites with heavy use of text-shadow alone can cause choppy scrolling on the average computer. Combining this with heavy use of javascript seems like a recipe for choppy web browsing.

edit: The loading animation on the o in orange is pretty awesome!