title: Fixed position background image in Firefox doesn't work with transformed element. Is this a FF bug?
body: <p><strong>The Goal:</strong> to create a fixed background position in a transformed element <em>that works in Firefox.</em></p>
  
  <p>I have tried all solutions on this page (and a handful of others), but none have worked:
  <a href="https://stackoverflow.com/questions/20268962/fixed-attachment-background-image-flicker-disappear-in-chrome-when-coupled-with">Fixed attachment background image flicker/disappear in chrome when coupled with a css transform</a></p>
  
  <p>Things I have tried using are static positions, backface visibility setting, z-index setting, other background-attachment stuff.</p>
  
  <p><strong>Demo:</strong></p>
  
  <p><a href="https://jsfiddle.net/96u9xqbn/6/" rel="noreferrer">https://jsfiddle.net/96u9xqbn/6/</a></p>
  
  <pre><code>.fixed1 {
     transform: translateZ(0);
  }
  </code></pre>
  
  <p>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.</p>