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

Question

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)

If you want to, I would try to set up a jsfiddle with as an example, it is easier to test upon... — Trufa, Jul 13 '12 at 20:05
Here is a similar example I made http://jsfiddle.net/VcvJe/1/ — Trufa, Jul 13 '12 at 20:14

score 3 · Accepted Answer · edited May 23 '17 at 10:34

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.

score 0 · Answer 2 · answered Jul 14 '12 at 08:28

Perhaps I am not fully understanding the question, but it sounds like you want the can to remain where it is as the user scrolls down the page. I think the flickering effect you describe is caused by the re-positioning of the can as the user scrolls.

Would using position: fixed be an acceptable alternative? Please see http://jsfiddle.net/VcvJe/8/ for a demo.

With a fixed position, the element is never re-positioned so there is no flicker. However, it will not work in IE<7 as there is no supportfor position: fixed.

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

2 Answers2