Fixed backgrounds fixed

Deliberately confusing title of the day goes to…

Original article:

Fixed position backgrounds cause performance issues with the content being scrolled causing constant repaints.

This can be improved by using the CSS property will-change

The secret is to put your background in it’s own element (a pseudo-element will do fine) and give that element will-change:transform;|
Note the examples are SASS syntax

You can see that our background image uses two GPU-intensive features of CSS: background-size: cover and background-attachment: fixed. Once we fix this painting issue neither will be a problem, since they will only be calculated once to render the initial page. Scrolling will no longer cause repainting once the image sits in its own layer.

Leave a Reply

Your e-mail address will not be published. Required fields are marked *