title: Scrolling background transition creates ripple effect on Chrome and IE
body: <p>I'm currently working on a new site build, currently located at <a href="http://weve.wpengine.com/" rel="nofollow">http://weve.wpengine.com/</a>. As part of the site design, I've implemented a simple backbone.js view that scrolls the background at a different speed to the rest of the content to create a perspective illusion. </p>
  
  <pre><code>weve.ScrollTransitionView = Backbone.View.extend({
      templateId: 'template-page-background',
      className: 'page-background',   
  
      initialize: function () {
          var scope = this;
  
          var factor = 1.3;
  
          jQuery(window).scroll(function (e) {
              var scrollTop = jQuery(this).scrollTop();
              var position = 'top ' + (scrollTop / factor) + 'px center';
              scope.$el.css({ 'background-position': position });
          });
      }
  });
  </code></pre>
  
  <p>This works fine in Firefox. However, in Chrome, there is a ripple effect upon scrolling - the background seems to only partially render in places and bits of the image get rendered out of place - and in I.E. the effect is jittery. </p>
  
  <p>Initially I thought this may be an issue with the skewed elements on the page but after creating a mockup using partially transparent images rather than CSS skewed DOM elements I experienced the same problems. </p>
  
  <p>Also, the mockup appeared to be fine when there were only a few elements on the page but when I translated this to the site where there were more text/images/elements on the page the rendering issue persisted.</p>
  
  <p>I've found hints here and there in this and other forums for related rendering issues but nothing which seems to match the problem I'm experiencing.</p>
  
  <p>Can anybody help?</p>