search

timhagn / gatsby-background-image

Lazy-loading React (multi)background-image component with optional support for the blur-up effect.
MIT License
253 stars 49 forks source link

How to avoid FPS drops with background-attachment = fixed #118

Closed cbr9 closed 4 years ago

cbr9 commented 4 years ago

When you set background-attachment to fixed in CSS, you get big FPS drops from the repaints (at least on Chrome, Firefox seems to handle it perfectly). There is a workaround that works perfectly and doesn't require setting that property, something like:

&:before { content: ' '; position: fixed; // instead of background-attachment width: 100%; height: 100%; top: 0; left: 0; background: url(${background}) no-repeat center center; background-size: cover; will-change: transform; // creates a new paint layer z-index: -1; }

However, I can't think of any way to replicate this using gatsby-background-image. Could it be possible?

cbr9 commented 4 years ago

Closing this as I found that simply using !important on the before and after pseudoselectors overrides the default values and allows to apply this workaround.