jqueryfirefoxgoogle-chromewebkitparallax

Jquery.css performing unwanted flickering effect on IE and Webkit (Chrome, Safari) but Firefox is ok

I have the following code:

$(document).ready(function(){
   $(window).scroll(function(){    
      Topo =  $(window).scrollTop();
      ObjScrollASoda.css({
          'marginTop' : (Topo - 800)+'px'
      });
   });
});

(note: ObjScrollASoda is the jquery object for the can)

Here is a fiddle replicating the issue of it made by Trufa: http://jsfiddle.net/VcvJe/1/

In the blue section, there is a blue can that will "scroll" with the page making a parallax-like effect. Here is the problem, as I'm just setting the css while the user scrolls the page, only in Chrome (and other webkit browsers) it happens the can to show a flickering effect (unwanted). And I noticed it doesn't happend in Firefox. Does anyone knows how to avoid this "flickering" effect ??

Here is a video explaining better what's happening : http://www.youtube.com/watch?v=SqDmOx6XY-M

(Sorry for my english)

Solution

  • I viewed your YouTube video and the best method is to set position:fixed when not moving the Azul Can or set position:absolute when moving it.

    That said, this SO Member's Answer created a simple plugin to do this with .scrollTop(); method.

    That same SO Question page has many other useful answers too.

    Reference: jsFiddle with Azul Can for Chrome

    View that jsFiddle without the /show/ as seen in the Address Bar to access the Edit Page.