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

Question

I have element with:

background-image url('../images/belly.png')
background-position  50% 50%
background-repeat no-repeat
background-attachment fixed
background-size cover

And underlying element with position: fixed;

And if I scroll page background is not redrawing. Problem appear in Chrome. Any solution?

demo: http://silentimp.github.io/90daysofbelly/

video: https://www.youtube.com/watch?v=av6jZciNszo&feature=youtu.be

AFAIK: chrome is not triggering scroll event as fast as FF and IE. — EGL 2-101, Feb 02 '15 at 23:33
How repaint may be related with scroll event? And is there a solution? — SilentImp, Feb 02 '15 at 23:36
Have you tried restarting your Chrome? I've tested it and the background is fixed, as it should be. — tao, Feb 02 '15 at 23:38
hmm ... after restart same problem appear. I test in Chrome 40.0.2214.94 (64-bit) on MacOSX 10.10.1 (14B25) — SilentImp, Feb 02 '15 at 23:40
You should create a sepparate div for background, with `position: fixed; width: 100%; height: 100%; display: block; z-index: -10; background-image: url(//your-image); background-size: cover;`. It will never move. — tao, Feb 02 '15 at 23:41
I try to create separate div. same story. (it was positioned fixed) — SilentImp, Feb 02 '15 at 23:42
See this http://www.html5rocks.com/en/tutorials/speed/scrolling/ and https://www.youtube.com/watch?v=KCtOt9OXvAM and http://stackoverflow.com/questions/10966710/choppy-laggy-scroll-event-on-chrome-and-ie — EGL 2-101, Feb 02 '15 at 23:44

tao · Accepted Answer · 2015-02-03T00:21:17.300

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>

score 1 · Answer 2 · edited Jun 21 '20 at 04:57

I had the same issue you had and struggled with it for almost 3 days. But as of June 2020 and improving on @tao's answer, here is a reliable solution I found for this that works on all devices and has 100% browser compatibility. It allows the desired effect in any place of the page and not just the top or bottom of the page, and you can create as many as you need or want.

The only known issue is with safari. The browser repaints the whole image every scroll movement so it puts a heavy burden on graphics and most of the time makes the image flicker up and down some 10px. There is literally no fix for this, but I think there is also no better response for your inquire.

I hope this works for you. You can check the results live in www.theargw.com, where I have three different fixed background images.

body, .black {
  width: 100%;
  height: 200px;
  background: black;
}

.e-with-fixed-bg {
  width: 100%;
  height: 300px;
  
  /* Important */
  position: relative;
}

.bg-wrap {
  clip: rect(0, auto, auto, 0);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.bg {
  position: fixed;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  background-image: url(https://images.pexels.com/photos/949587/pexels-photo-949587.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500);
  transform: translateZ(0);
  will-change: transform;
}

.e-container {
  z-index: 1;
  color: white;
  background: transparent;
}

<div class="black"></div>
<div class="e-with-fixed-bg">
  <div class="bg-wrap">
     <div class="bg"></div>
  </div>
  <div class="e-container">
    <h1>This works well enought</h1>
  </div>
</div>
<div class="black"></div>

--------------------- EDIT --------------------- The code posted was missing the background wrapper that allows the background to not change size and maintain the fixed position. Sorry to post the wrong code this morning guys! But here is the change.

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

2 Answers2