Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS background attachment fixed fix for chrome 67

I just wanted to post a quick question concerning any parallax background image that has dissapeared upon the new version 67 chrome update.

Currently there are two fixes that I have found online that work.

Are there any others that may work better, and can anyone let me know why the new version of chrome 67 is making background fixed images disappear?

You can add the following transform properties below to your element that contains a background image with fixed attachment. reference(1)

yourdiv {
position:relative;
background-image:url(your_image);
background-size:cover;
background-position:center;
background-attachment:fixed;
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
}

OR you can change the position to static of the element with the background fixed image. reference(2)

yourdiv {
position:static;
background-image:url(your_image);
background-size:cover;
background-position:center;
background-attachment:fixed;
}

Hope this helps for now and thank you in advance for any answers posted.

like image 593
Digggid Avatar asked Jun 11 '18 19:06

Digggid


Video Answer


1 Answers

add style

will-change: transform;
background-attachment: fixed;
like image 71
Cheizer Avatar answered Sep 28 '22 05:09

Cheizer