Background Center with Chrome (Bug)

Background center with chrome (bug)

For me, this did the trick:

@media screen and (-webkit-min-device-pixel-ratio:0) { 

html {
    margin-left: 1px;
}

}

I will post the link for this solution as soon as I find were I got it from a few days ago.
In the same post, the guy said the problem was with odd or even number for container width.
Anyway, this fixed the problem in my case.

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

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>

CSS display issues in Chrome: background-image & position

I just wanted to post your solution so that it was obvious it had been found, and anyone looking for the answer doesn't miss it. It looks a bit hidden up in your question.

The position problem was fixed by specifying a percentage position instead of a pixel position, in the css created by the jquery for animating the title. No general solution to this, or what it was about Chrome that changed. Could not reproduce in a test environment, so it is something about my page in addition to changes in Chrome.

---

Related Topics