/blog/links/

Fix scrolling performance with CSS will-change property →

Chris Ruppel:

As Paul explains in his short video, using background-attachment: fixed causes a paint operation every time the user scrolls. Why? Well, the page has to reposition the content, and then, since its background image is supposed to appear as if it’s holding still, the browser has to repaint that image in a new location relative to its actual DOM elements. The performance for this feature is so bad that iOS simply ignores this property.

Chris is talking about this screencast by Paul Lewis in which he improves the scrolling performance of the JSConfEU Website.

Chris had the same problem on his own site and goes through the process of fixing the issue. Well written and explained.

The screencast of Paul as well as the article by Chris is worth your time, especially if you've never heard of the will-change property or never have worked with the Timeline tool of the Chrome DevTools and have no idea how to analyse the fps of your website.

Martin Wolf

Hi, I’m Martin Wolf, a Freelance Frontend Web Developer from Germany.
I believe in hard work and sharing what I know.

Contact me

Interested in working with me? Fantastic! The best way to get in touch is by email (hello@martinwolf.org). I’m looking forward to hearing from you.