title: Jerky/flickering background image on scroll on Webkit and Edge (jQuery and vanillaJS)
body: <p>I am using jQuery to make a background image appear fixed (since background-attachment: fixed doesn't <a href="https://stackoverflow.com/questions/21786272/css-background-size-cover-background-attachment-fixed-clipping-background-im">play nicely</a> with background-size: cover). In some environments the image doesn't flicker but in others it does, and I can't figure out why. (A related but different question is <a href="https://stackoverflow.com/questions/34861624/parallax-jquery-flickering-image-on-webkit">here</a>, but I'm not using parallax scrolling.)</p>
  
  <p>It doesn't flicker <a href="http://classicescapes.businesscatalyst.com/" rel="nofollow noreferrer">here</a> and on <a href="https://jsfiddle.net/asteinberg/bhrmgt2j/5/" rel="nofollow noreferrer">this fiddle</a>:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(window).scroll(function() {
    var scrolledY = $(window).scrollTop();
    $('#bg').css('background-position', 'left ' + scrolledY + 'px');
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    height: 3000px;
    margin: 0;
  }
  
  #bg-wrap {
    position: relative;
    width: 100%;
  }
  
  #bg {
    height: 600px;
    width: 100%;
    position: relative;
    background-attachment: scroll;
    background-image: url('http://classicescapes.businesscatalyst.com/Images/home-banner/CAPE_RT_desat.jpg');
    background-position: left top;
    background-repeat: no-repeat;
    background-size: cover!important;
  }
  
  #bg-text {
    position: absolute;
    top: 200px;
    left: 47%;
    font-size: 3rem;
    color: #fff;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div id="bg-wrap"&gt;
    &lt;div id="bg"&gt;
    &lt;/div&gt;
    &lt;div id="bg-text"&gt;Hello!&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>It flickers <a href="http://classicescapes.businesscatalyst.com/test" rel="nofollow noreferrer">here</a> when using Webkit and Edge browsers (but doesn't flicker on IE and Firefox).</p>
  
  <p>Over <a href="http://greenlifeafrica.businesscatalyst.com/region/okavango-delta-and-moremi" rel="nofollow noreferrer">here</a> it flickers until one initializes a Google Map by clicking on the "Region Map" tab.</p>
  
  <p>Any help as to understanding the cause and providing a possible fix would be greatly appreciated.</p>