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.

It’s the simple things…. OSX Git branch autocompletion.




Get the script:

Add to ~/.bash_profile:

Changes will be picked up in new terminal tabs, or run

to reload your profile in the current tab.