title: Scrolling blend effect - performance issues in all browsers except Chrome
body: <p>With the help received in a <a href="https://stackoverflow.com/questions/49763949/parallax-effect-force-text-block-to-behave-like-background-attachment-fixed">previous answer</a>, I'm utilizing a bit of JS along with CSS variables to achieve a "blend" effect when scrolling through a page as seen in <a href="https://codepen.io/reidgannah/pen/eKpNbK" rel="nofollow noreferrer">this working example</a>.</p>
  
  <p>The solution is great... but only in Chrome. I've begun to implement this in my project though and testing in other browsers revealed severe performance issues, specifically the content block jumps around while scrolling. I revisited my test example in Firefox &amp; Safari and found the same issues.</p>
  
  <p>So my question is simply, what can I do to improve the performance of this effect? I've done quite a bit of searching to find an alternative way to pull off this effect, but no luck thus far. Perhaps there are modifications I can make to my JS to account for these issues though.</p>
  
  <p>I've included my code below for reference. Any help would be greatly appreciated.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>window.onscroll = function() {
    var scroll = window.scrollY || window.scrollTop || document.getElementsByTagName("html")[0].scrollTop;
    document.documentElement.style.setProperty('--scroll-var', scroll + "px");
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>:root {
    --scroll-var: 0px
  }
  
  body {
    margin: 0;
    padding: 0;
  }
  
  h2 {
    font-size: 48px;
  }
  
  p {
    font-size: 18px;
  }
  
  section {
    min-height: 100vh;
    width: 100%;
    text-align: center;
    overflow: hidden;
    background-attachment: fixed !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    position: relative; /*Mandatory for the overflow effect*/
    height: 100vh;
  }
  
  section.first {
    background: linear-gradient(rgba(74, 180, 220, .85), rgba(74, 180, 220, .85)), url(https://picsum.photos/1920/500/?image=1057);
  }
  
  section.first .content {
    /* the first section so top start from 0*/
    top: calc((0 * 100vh) + var(--scroll-var));
  }
  
  section.second {
    background: linear-gradient(rgba(103, 198, 180, .85), rgba(103, 198, 180, .85)), url(https://picsum.photos/1920/500/?image=1067);
  }
  
  section.second .content {
    /* the second section so we need to remove the height of top section
       to have the same position so -100vh and we do the same for the other sections  
    */
    top: calc((-1 * 100vh) + var(--scroll-var));
  }
  
  section.third {
    background: linear-gradient(rgba(5, 123, 188, .85), rgba(5, 123, 188, .85)), url(https://picsum.photos/1920/500/?image=1033);
  }
  
  section.third .content {
    top: calc((-2 * 100vh) + var(--scroll-var));
  }
  
  section.fourth {
    background: linear-gradient(rgba(187, 216, 100, .85), rgba(187, 216, 100, .85)), url(https://picsum.photos/1920/500?image=1063);
  }
  
  section.fourth .content {
    top: calc((-3 * 100vh) + var(--scroll-var));
  }
  
  .content {
    position: absolute;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .copy {
    color: #fff;
    font-family: 'Noto Serif', serif;
    font-weight: 300;
    max-width: 300px;
  }
  
  .button {
    border: 2px solid #fff;
    border-radius: 3px;
    padding: 15px 25px;
    display: inline-block;
    width: auto;
    font-family: 'Assistant', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: .2s ease all;
  }
  
  .button:hover {
    background: #fff;
    color: #333;
    cursor: pointer;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
    &lt;section class="first"&gt;
      &lt;div class="content"&gt;
        &lt;div class="copy"&gt;
          &lt;h2&gt;Header 1 &lt;/h2&gt;
          &lt;p&gt;Nullam id dolor id nibh ultricies vehicula ut id elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/section&gt;
    &lt;section class="second"&gt;
      &lt;div class="content"&gt;
        &lt;div class="copy"&gt;
          &lt;h2&gt;Header 2&lt;/h2&gt;
          &lt;p&gt;Nullam id dolor id nibh ultricies vehicula ut id elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/section&gt;
    &lt;section class="third"&gt;
      &lt;div class="content"&gt;
        &lt;div class="copy"&gt;
          &lt;h2&gt;Header 3&lt;/h2&gt;
          &lt;p&gt;Nullam id dolor id nibh ultricies vehicula ut id elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/section&gt;
    &lt;section class="fourth"&gt;
      &lt;div class="content"&gt;
        &lt;div class="copy"&gt;
          &lt;h2&gt;Call to action&lt;/h2&gt;
          &lt;a class="button"&gt;Button&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/section&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>