Chrome issue with background-attachment fixed and position fixed elements

Question

I've had this issue for a while and it seems to be a Chrome redraw bug that hasn't been fixed. So I'm looking for any stop-gap fixes.

The main issue is that when an element on the page has a background image that uses:

background-attachment: fixed; 

If another element is fixed and has a child video element it causes the element with the background image to disappear.

Now it works fine in Safari (and Firefox and IE) so it's not exactly a webkit issue. I've applied several properties that have been suggested to no avail.

-webkit-backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); 

Initial Demo

Currently my solution is just to target the elements with a fixed bg image via a media query and just turn off the fixed background property.

@media screen and (-webkit-min-device-pixel-ratio:0) { background-attachment: scroll; } 

Any ideas?

Update

Working Demo thanks to Daniel.

Update 2

Better demo!

Shoutout to somesayinice and FourKitchens blog post

Answer 1

Since a fixed positioned background seems to break for no reason in Chrome, you can potentially try playing around with the clip and position:fixed properties. It's not very well known, but the clip property when set on an absolute positioned element will actually even crop fixed positioned child elements.

There are some drawbacks, however. Most importantly, this trick sadly doesn't work flawlessly on iOS for some reason, whereas the browser has troubles rendering the entire image while the user is scrolling (you kinda get a pop-in effect). It's not something overly major, but perhaps something you should take in regard. Of course, you can still work around this by using for example some clever javascript that falls back to a fixed background. Another iOS workaround is by merely using -webkit-mask-image: -webkit-linear-gradient(top, #ffffff 0%,#ffffff 100%) which is basically a webkit-specific alternative for clip: rect(auto,auto,auto,auto) (i.e. crop everything outside the container).

I made a JSFiddle (codepen didn't want to play with me) implementation example for how you can do this. Look specifically at .moment, .moment-image and the new .moment-clipper.

I hope this is of some help!

Update: Clip is now deprecated in favour of clip-path, but is as of writing still supported in all browsers. The same effect can however be achieved with:

-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); overflow: hidden; 

position: absolute is no longer required on the container. Support for clip-path seems to be relatively limited, with only Chrome and Safari currently supporting it with prefixes. The safest bet is probably to include both clip and clip-path since they don't appear to interfere with each other.

I've updated the fiddle above to also include clip-path.

Answer 2

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>

Works great for me as a way of getting around this very annoying bug.