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
12345678910 .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
andbackground-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.
12345678910111213141516171819202122 .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-elementposition: relative; // added for pseudo-element// Fixed-position background image&:before {content: ' ';position: fixed; // instead of background-attachmentwidth: 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 layerz-index: -1;}}