Fixed Position Background Image in Firefox Doesn't Work with Transformed Element. Is This a Ff Bug

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>

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. :)

Positions fixed doesn't work when using -webkit-transform

After some research, there has been a bug report on the Chromium website about this issue, so far Webkit browsers can't render these two effects together at the same time.

I would suggest adding some Webkit only CSS into your stylesheet and making the transformed div an image and using it as the background.

@media screen and (-webkit-min-device-pixel-ratio:0) {
  /* Webkit-specific CSS here (Chrome and Safari) */

  #transformed_div {
    /* styles here, background image etc */
  }
}

So for now you'll have to do it the old fashioned way, until Webkit browsers catch up to FF.

EDIT: As of 10/24/2012 the bug has not been resolved.

---

This appears to not be a bug, but an aspect of the specification due to the two effects requiring separate coordinate systems and stacking orders. As explained in this answer.

---

Related Topics