Chrome Issue with Background-Attachment Fixed and Position Fixed Elements

Chrome issue with background-attachment fixed and position fixed elements

Found this solution on: https://fourword.fourkitchens.com/article/fix-scrolling-performance-css-will-change-property

Seems to me to be a clever way to use :before pseudo element. Limit the width for fixed width elements but works great for full width pages. Essentially comes out to look like this:

.background_fill {  overflow: hidden;  position: relative;    color: red;}.background_fill:before {  background-color: white;  background: url('http://www.lausanneworldpulse.com/pdfs/brierley_map_0507.jpg') no-repeat center center;  background-size: cover;  z-index: -3;  content: " ";  position: fixed;  will-change: transform;  width: 100%;  height: 100%;}

<div class="background_fill">  <div>this is on a background / this is on a background / this is on a background / this is on a background / this is on a background / this is on a background</div>  <div>this is on a background / this is on a background / this is on a background / this is on a background / this is on a background / this is on a background</div>  <div>this is on a background / this is on a background / this is on a background / this is on a background / this is on a background / this is on a background</div>  <div>this is on a background / this is on a background / this is on a background / this is on a background / this is on a background / this is on a background</div>  <div>this is on a background / this is on a background / this is on a background / this is on a background / this is on a background / this is on a background</div>  <div>this is on a background / this is on a background / this is on a background / this is on a background / this is on a background / this is on a background</div>  <div>this is on a background / this is on a background / this is on a background / this is on a background / this is on a background / this is on a background</div>  <div>this is on a background / this is on a background / this is on a background / this is on a background / this is on a background / this is on a background</div>  <div>this is on a background / this is on a background / this is on a background / this is on a background / this is on a background / this is on a background</div>  <div>this is on a background / this is on a background / this is on a background / this is on a background / this is on a background / this is on a background</div>  <div>this is on a background / this is on a background / this is on a background / this is on a background / this is on a background / this is on a background</div>  <div>this is on a background / this is on a background / this is on a background / this is on a background / this is on a background / this is on a background</div>  <div>this is on a background / this is on a background / this is on a background / this is on a background / this is on a background / this is on a background</div>  <div>this is on a background / this is on a background / this is on a background / this is on a background / this is on a background / this is on a background</div>  <div>this is on a background / this is on a background / this is on a background / this is on a background / this is on a background / this is on a background</div>  <div>this is on a background / this is on a background / this is on a background / this is on a background / this is on a background / this is on a background</div></div>

Repaint bug with background-attachment fixed and background-size cover in Chrome

I have noticed the best way to make sure the page backgound stays fixed no matter what is: place it as the background image of an empty first child of body, with these CSS rules:

.background-holder {
    position: fixed; 
    width: 100%; 
    height: 100%; 
    display: block; 
    z-index: -10; 
    background-image: url(//link-to-image);
    background-size: cover;
}

And here's the page structure:

<html>
    <head>
    </head>
    <body>
        <div class="background-holder"></div>
        <div class="main-container">
            <!-- content goes here -->
        </div>
    </body>
</html>

Fix for background-attachment bug in Chrome

I have forked and tweaked your JSFiddle to get the parallax effect to work pretty much that way that I would expect it to work, but you'll have to check it out for yourself to verify.

The main insight here is that the background-attachment: fixed should be applied to the parent/container div that will not "scroll". Think of your card-wrapper class being a very, very tall container, holding all the individual cards that scroll upwards, and all of this while the fixed container, which has the background image, remains fixed in the background.

Chrome Issue with Background-Attachment Fixed and Position Fixed Elements