Strange behaviour with Chrome + position:fixed + background-attachement:fixed

Question

This problem has been reported several times on SO and elsewhere but i couldn't find any well working solution.

If you have a fixed positioned div with a fixed-attached background, in some specific conditions the rendering is buggy on Google Chrome (tested without problem on Firefox & IE11).

I made the codepen below to illustrate the problem: https://codepen.io/EricRondo/pen/PaENpe

As you can see, on Chrome only, the background doesn't cover all the div, which is supposed to be 400px height.

The effect depends on the "top" position. Here what happens when top is increased by 50px : https://codepen.io/EricRondo/pen/WydwMW

I added another div with a defined height because without scroll there is actually no problem at all. Very strange !

I came acrossed many solutions like :

-webkit-transform: translateZ(0);

But while it does work in "some" cases, including the codepens above, it does not in my situation, which involves much more containers and JS code. But the root of the problem is essentially the same : it occurs only when a fixed positioned div has background-attachement:fixed.

The full website with the issue is here : http://reims.dev-indelebil.com/

No problem with Firefox : clean and smooth parallax effect, but with Chrome this strange behaviour is happening. When adding translateZ(0) or any other "GPU tricks" on the containers it becomes all laggy/jerky, far from the excepted behaviour.

Thanks by advance for any advice or solution !

Answer 1

I fooled around with it and came up with this, I'm not sure if it will work in your specific situation:

https://codepen.io/anon/pen/ERogXM

.fixed {
  position:fixed;
}
.elt {
  position:fixed;
  top:250px;
}

Then:

<div class="fixed">
  <div class="elt"></div>
</div>

Basically wrapping the .elt div in a container div that is also position:fixed. It works in the codepen but not sure if it'll work in your specific situation on the actual site ...