Why Is Fixed Background Image on Chrome Not Working

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>

Fixed attachment background image flicker/disappear in chrome when coupled with a css transform

This has been a very common unsolved mystery. Recently I had the same problem, and '-webkit-backface-visibility: hidden', proved to be less than useless (on my 'fixed' attached background), since the background just disappeared when it was set. (Additional Info: the reason is that when the background is set as fixed, it is almost similar to putting a fixed 'div' in the background and setting the original div background to be transparent. Hidden backface does the obvious).

To solve the current problem, try setting the 'position' propery of the element as 'static', or if you have given it some other value, namely 'relative', 'fixed' or 'absolute', just remove those.

If you don't remember setting the position property, and the problem still persist, my suggestion is that you use a debugging tool on chrome or firefox, to

make sure there are no manually set values to the 'position' property other than
'static'.

Just spent half an hour searching... Thought this could make it easier for you... regards. :)

Related Topics