title: parallax scrolling issue - div element jerking when scrolling in webkit browsers
body: <p>I have created a parallax scroll, which seem to be working fine in firefox however in the chrome browser there's a slight jump on the body text when scrolling. <a href="http://iamnatesmithen.com/DGI/" rel="noreferrer">click here scroll to the about section</a>. I am not sure if t this is a css or JS issue.. below is a snippet i have incorporated into my parallax function</p>
  
  <p>Does anyone know how i an fix this issue?</p>
  
  <pre><code>$(document).ready(function(){
  
  // Cache the Window object
  $window = $(window);
  
  // Cache the Y offset and the speed of each sprite
  $('[data-type]').each(function() {  
      $(this).data('offsetY', parseInt($(this).attr('data-offsetY')));
      $(this).data('Xposition', $(this).attr('data-Xposition'));
      $(this).data('speed', $(this).attr('data-speed'));
  });
  
  // For each element that has a data-type attribute
  $('[data-type="background"]').each(function(){
  
  
      // Store some variables based on where we are
      var $self = $(this),
          offsetCoords = $self.offset(),
          topOffset = offsetCoords.top;
  
  
      // When the window is scrolled...
      $(window).scroll(function() {
  
          // If this section is in view
          if ( ($window.scrollTop() + $window.height()) &gt; (topOffset) &amp;&amp;
               ( (topOffset + $self.height()) &gt; $window.scrollTop() ) ) {
  
              // Scroll the background at var speed
              // the yPos is a negative value because we're scrolling it UP!                              
              var yPos = -($window.scrollTop() / $self.data('speed')); 
  
              // If this element has a Y offset then add it on
              if ($self.data('offsetY')) {
                  yPos += $self.data('offsetY');
              }
  
              // Put together our final background position
              var coords = '50% '+ yPos + 'px';
  
              // Move the background
              $self.css({ backgroundPosition: coords });
  
             $('[data-type="scroll-text"]', $self).each(function() {
                      var $text= $(this);
                       var pos = ($window.scrollTop()/10) * $text.data('speed');
                       var curP = $text.css('margin-top'); 
                       var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') &gt; -1;
                       if(is_chrome) {
                           $text.animate({
                           paddingTop: pos,
                          }, 200, 'linear', function() {
                              // Animation complete.
                          });
                       } else {
                       $text.css('padding-top', pos);
                       }
              }); 
  
          }; // in view
  
      }); // window scroll
  
  }); // each data-type
  
  
        }); // document ready
  </code></pre>