Background-Attachment Fixed with Transform Not Working in Firefox

background-attachment: fixed; is not working in firefox

If you disable this on the .page-container class:

-ms-transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);

It should be better.

background-attachment: fixed not working as expected in firefox

It looks that, though counter-intuitive, the behavior of Firefox(and Edge) is intended and correct as per spec: the transform property (used by the GSAP library for animation) makes background-attachment: fixed behave as scroll. So I'd suggest removing background-attachment: fixed and replacing it with different background-position values for each slice of the image.

May be this answer would also be relevant: https://stackoverflow.com/a/43067630/2533215

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

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.

background-attachment: fixed in Firefox or Edge versus Chrome

$(function() { "use strict"; var $skp = $('.skewhero-parallax'); var $skm = $('.skewhero-mask'); var $hi = $('.hero-image');
 function calcParallax() {   var $scroll = $(document).scrollTop();   $skm.css({'transform':'skew(24deg) translateX(-' + (0.445 * $scroll) + 'px)'});   $skp.css({'transform':'translateY(' + $scroll + 'px)'});   $hi.css({'transform':'translateY(' + $scroll + 'px)'}); }
 $(window).on('scroll', function () {  calcParallax(); });
 $(window).resize(function() {  calcParallax(); });});

body {  height: 150vh;}
#hero {    position: relative;    border: none;    height: 100vh;}
#hero .hero-container { height: 95%; overflow: hidden;}
#hero .hero-container:after { content: ""; position: absolute; background: rgba(0,0,0,0.2); height: 95%; top: 0; left: 0; right: 0;}
#hero .hero-image { height: 100%; background-image: url(https://images.unsplash.com/photo-1518791841217-8f162f1e1131); background-repeat: no-repeat; background-size: cover; will-change: transform;}
#hero .skewhero-mask { height: 100%; position: absolute; top: 0; left: 10vh; width: 45vw; overflow: hidden; transform: skew(24deg) translateX(0vh); will-change: transform;}
#hero .skewhero-parallax { width: 200%; position: absolute; top: 0; left: 0; bottom: 0; right: 0; transform: translateY(0px); will-change: transform;}
#hero .skewhero-image { background-image: url(https://images.unsplash.com/photo-1518791841217-8f162f1e1131); background-repeat: no-repeat; height: 100%; background-size: 110% auto; background-position: 0px -35px; transform-origin: right top; transform: skew(-24deg);}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><section id="hero">    <div class="hero-container">        <div class="hero-image"></div>    </div>    <div class="skewhero-mask">      <div class="skewhero-parallax">        <div class="skewhero-image"></div>      </div>    </div></section>