title: Linear gradient is not working when used with "background-attachment: fixed"
body: <p>I am trying to make a linear-gradient with percentage breakpoints while using "background-attachment: fixed". It is not working as I expected.</p>
  
  <p>I've made a very simple fiddle about my question.</p>
  
  <p><a href="https://jsfiddle.net/f8v1h0ac/" rel="nofollow noreferrer">https://jsfiddle.net/f8v1h0ac/</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;body&gt;
      &lt;header&gt;
          Header
      &lt;/header&gt;
      &lt;main&gt;
          Main
      &lt;/main&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>CSS </p>
  
  <pre><code>body {
    margin: 0;
    padding: 0;
  }
  
  header {
    width: 100%;
    height: 300px;
    background-attachment: fixed;
  
    /* background-image: linear-gradient(to bottom, black 0px, white 300px); */
  
    /* The code above is working but the code below is not. Note that the color at the bottom line of header is supposed to be white. */
  
    background-image: linear-gradient(to bottom, black 0%, white 100%);
  }
  
  main {
    height: 2000px;
  }
  </code></pre>
  
  <p>PS: I guess this happens because the gradient's height is respective to the window height. But I don't have a clue how to solve this problem.</p>