title: Background blend mode issue with background attachment fixed
body: <p>I have the following style in my css file to set the background of my html to a soothing gradient. However there was a problem that, if the height of the content is not 100% of the screen, the gradient gets cut off and repeats. So I added the <code>background-attachment: fixed;</code> line so that the gradient fills the page. But now the blend mode is not working. Earlier I had a soothing light color combination due to the <code>background-blend-mode: screen;</code> but now the colors are brighter. How can I fix this? I am using the latest version of mozilla firefox.</p>
  
  <pre><code>body {
      background:
          linear-gradient(
              cyan,
              transparent
          ),
          linear-gradient(
              -45deg,
              magenta,
              transparent
          ),
          linear-gradient(
              45deg,
              orange,
              transparent
          );
      background-blend-mode: screen;
      background-attachment: fixed; //added later to fill the background
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/f90vwhw3/" rel="nofollow noreferrer"><strong>Here is the jsfiddle link.</strong></a></p>
  
  <p>Expected output</p>
  
  <p><img src="https://i.stack.imgur.com/O73ks.jpg" alt="Expected output"></p>
  
  <p>What I am getting</p>
  
  <p><img src="https://i.stack.imgur.com/9GmrL.jpg" alt="What I am getting"></p>