Deliberately confusing title of the day goes to…

Original article: fourkitchens.com

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

Original CSS (SASS)

Sass

.what-we-do-cards { @include clearfix; border-top: 10px solid rgba(255, 255, 255, .46); background-color: white; background: url('/img/front/strategy.jpg') no-repeat center center; background-attachment: fixed; background-size: cover; color: $white; padding-bottom: 4em; }

1 2 3 4 5 6 7 8 9 10

.what-we-do-cards {   @include clearfix;   border-top: 10px solid rgba(255, 255, 255, .46);   background-color: white;   background: url('/img/front/strategy.jpg') no-repeat center center;   background-attachment: fixed;   background-size: cover;   color: $white;   padding-bottom: 4em; }

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.

GPU-friendly CSS (SASS)

Sass

.what-we-do-cards { @include clearfix; border-top: 10px solid rgba(255, 255, 255, .46); color: $white; padding-bottom: 4em; overflow: hidden; // added for pseudo-element position: relative; // added for pseudo-element // Fixed-position background image &:before { content: ' '; position: fixed; // instead of background-attachment width: 100%; height: 100%; top: 0; left: 0; background-color: white; background: url('/img/front/strategy.jpg') no-repeat center center; background-size: cover; will-change: transform; // creates a new paint layer z-index: -1; } }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

.what-we-do-cards {   @include clearfix;   border-top: 10px solid rgba(255, 255, 255, .46);   color: $white;   padding-bottom: 4em;   overflow: hidden; // added for pseudo-element   position: relative; // added for pseudo-element   // Fixed-position background image   &:before {     content: ' ';     position: fixed; // instead of background-attachment     width: 100%;     height: 100%;     top: 0;     left: 0;     background-color: white;     background: url('/img/front/strategy.jpg') no-repeat center center;     background-size: cover;     will-change: transform; // creates a new paint layer     z-index: -1;   } }