title: background-attachment: fixed in Firefox or Edge versus Chrome
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
      height: 150vh;
  }
  
  #hero {
      position: relative;
      border: none;
      height: 100vh;
  }
  
  #hero .hero-image {
      background-image: url(https://images.unsplash.com/photo-1518791841217-8f162f1e1131);
      background-attachment: fixed;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      height: 95%;
  }
  
  #hero .hero-image:after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      background: rgba(0,0,0,0.2);
  }
  
  #hero .skewhero-mask {
      height: 100%;
      position: absolute;
      top: 0;
      left: 10vw;
      width: 45vw;
      overflow: hidden;
      transform: skew(24deg) translateX(0vh) translateY(0%);
  }
  
  #hero .skewhero-parallax {
      transform: translateX(0vh);
      width: 200%;
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
  }
  
  #hero .skewhero-image {
      background-image: url(https://images.unsplash.com/photo-1518791841217-8f162f1e1131);
      height: 100%;
      background-size: 110% auto;
      background-attachment: fixed;
      transform-origin: right top;
      transform: skew(-24deg);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;section id="hero"&gt;
      &lt;div class="hero-image"&gt;
      &lt;/div&gt;
      &lt;div class="skewhero-mask"&gt;
        &lt;div class="skewhero-parallax"&gt;
          &lt;div class="skewhero-image"&gt;&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I am really stuck with this one. I'm designing a parallax effect where I shift the <code>background-position</code> property of a fixed background using jQuery. The jQuery isn't at fault here, so I won't include it here to reduce the complexity of the question.</p>
  
  <p>In Chrome, I get the desired effect. In Firefox or Edge, it's a nightmare. I have not tested it on Opera as of yet. When removing the <code>background-attachment: fixed</code> from the class <code>.skewhero-image</code> in those browsers, I notice there's no difference whatsoever. The property doesn't do anything, because when I remove the same property in Chrome, I get the same undesirable result as in the other browsers.</p>
  
  <p>How can I change my code as to achieve the exact same effect as I have now in Chrome, but in all other desktop browsers as well? Mobile browsers excluded.</p>
  
  <p>Basically, the image of the cat must <em>not</em> move, only the <em>container</em> surrounding it. In Chrome, this works as intended. In Firefox or Edge, the cat moves with the container, it isn't fixed to the viewport.</p>
  
  <p>Edit: I have found out that leaving out <strong>all</strong> <code>transform</code> properties, from itself and all parents, fixes the image to the viewport. Anything to remedy this?</p>