Fixed position background image in Firefox doesn't work with transformed element. Is this a FF bug?

Question

The Goal: to create a fixed background position in a transformed element that works in Firefox.

I have tried all solutions on this page (and a handful of others), but none have worked: Fixed attachment background image flicker/disappear in chrome when coupled with a css transform

Things I have tried using are static positions, backface visibility setting, z-index setting, other background-attachment stuff.

Demo:

https://jsfiddle.net/96u9xqbn/6/

.fixed1 {
   transform: translateZ(0);
}

If you remove the transform above, it works. But, If you're using something like Skrollr, or have another need for the transform, then the background is not properly fixed in firefox.

Answer 1

Unfortunately this is not bug, but a change of scope.

There was a problem where browsers were inconsistent in their behaviour with background-attachment:fixed; inside transformed elements, which was causing additional inconsistencies with 3D transforms.

The spec for background-attachment was adjusted to include a rule that elements within transformed elements would have their background-attachment rules set to scroll.

Firefox and Edge have both conformed to the new spec, Chrome has so far not deployed the change on their side (at the time of posting this, their bugtracker shows 30 Nov as their end date)

---

Workaround:

The quickest and easiest way to work around this change of spec would be to use a parallax library to hit this for you. A fairly popular one is called Skrollr, and I've adjusted your fiddle to include it.

Essentially you can just add data-0 and data-10000 attributes to your element, and then initialise the library using skrollr.init();

This has the drawback of using a library for something that was previously achievable in clean CSS, but it does also carry positive weight in that a parallax background is much easier on the eyes than a fixed background.