title: Flickering - Change CSS Background Position on Window Scroll
body: <p>I'm going to rephrase my question due to lack of views.  Does anyone know why modifying background-position on window scroll for Chrome and IE causes flickering sometimes? </p>
  
  <p>Basically something like this will always cause flickering in Chrome and IE:</p>
  
  <pre><code>$(window).scroll(function(){$(divwithbg).css('background-position','center '+positiveinteger+px')});
  </code></pre>
  
  <p>Something like this never seems to flicker in any major browser:</p>
  
  <pre><code>$(window).scroll(function(){$(divwithbg).css('background-position','center '+negativeinteger+px')});
  </code></pre>
  
  <p>If you want to see this problem, try my sample code below, along with attached image.  If you set data-parallaxdirection="0", that will be jitter free.  If you set data-parallaxdirection="1", that will have jittering.  I've attached the image I was using to this post.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
          &lt;style type="text/css"&gt;
          .parallax-container {width:100%; position:relative; display:block; overflow:hidden; background-color:black; background-position:center center; background-repeat:no-repeat;}
  
          &lt;/style&gt;
          &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"&gt;&lt;/script&gt;
  
  
          &lt;script type="text/javascript"&gt;
  var CONTAINER = window;
  var AVAILHEIGHT;
  $(document).ready(function(){
      $(window).scroll(ParallaxScrollEvent);
      AVAILHEIGHT = $(window).height();
      $('.parallax-container').height(AVAILHEIGHT/1.1);
  });
  
  function ParallaxScroll(obj)
  {
      var containerTop = $(obj).position().top;
      var containerHeight = $(obj).height();
      var parallaxspace = parseInt($(obj).attr('data-parallaxspace'));
      var goforward = parseInt($(obj).attr('data-parallaxdirection'));
      var scrollTop =  $(window).scrollTop() + AVAILHEIGHT;
  
  //  var links = $('.location-links'); //on contact page
  
  
      if( scrollTop &gt; containerTop)
      {
              var pos = 0;
              if(goforward)
              {
                              // why does this cause flickering?
                  var scrolled = $(window).scrollTop() - containerTop;
                  pos = 1.2*scrolled;
  
              }
              else
              {
                              // why is this flicker free?
                  pos = -1*(scrollTop-containerTop)*parallaxspace/(2*containerHeight);
              }
              $(obj).css('background-position', 'center '+pos+'px');
      }
  }
  
  function ParallaxScrollEvent()
  {
      var parallaxcontainer = $('.parallax-container');
      for(var c=0; c&lt; parallaxcontainer.length; c++)
          ParallaxScroll(parallaxcontainer[c]);
  }
  
          &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="parallax-container" style="background-image:url(images/location/2.jpg);" data-parallaxdirection="1" data-parallaxspace="800"&gt;
              &lt;/div&gt;
              &lt;div class="parallax-container" style="background-image:url(images/location/2.jpg);" data-parallaxdirection="1" data-parallaxspace="800"&gt;
              &lt;/div&gt;
              &lt;div class="parallax-container" style="background-image:url(images/location/2.jpg);" data-parallaxdirection="1" data-parallaxspace="800"&gt;
              &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/NHCAJ.jpg" alt="enter image description here"></p>