Geek Answers Handbook

Jquery.css performs an unwanted flickering effect on IE and Webkit (Chrome, Safari), but Firefox is fine

I have the following code:

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

(note: ObjScrollASoda is a jquery object for can)

Here is the fiddle replicating the problem made by Trufa: http://jsfiddle.net/VcvJe/1/

In the blue section there is a blue jar that will “scroll” with a page creating a parallax effect. Here is the problem, because I just install css while the user scrolls the page, only in Chrome (and other web browser browsers) it can show a flickering effect (undesirable). And I noticed that this does not happen in Firefox. Does anyone know how to avoid this flickering effect?

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

(Sorry for my English)

+4
source share
2 answers

I watched your YouTube video , and the best way is to set position:fixed without moving Azul Can or set position:absolute when moving.

However, this Member Member Answer created a simple plugin for this using the .scrollTop(); method .scrollTop(); .

There are many other useful answers in the same SO Question page.

Link: jsFiddle using Azul Can for Chrome

See jsFiddle without /show/ as shown in the Address bar to access the Edit page .

+3
source

Maybe I don’t quite understand the question, but it looks like you want the bank to stay where it is when the user scrolls down the page. I think the flickering effect that you are describing is caused by the repeated positioning of the jar while scrolling the user.

Would using position: fixed an acceptable alternative? For a demo, see http://jsfiddle.net/VcvJe/8/ .

With a fixed position, the element is never reset, so there is no flickering. However, it will not work in IE 7 since there is no support for position: fixed .

0
source

More articles:


All Articles