JQuery. Layout is shaking during animation

views:

103

answers:

JQuery. Layout is shaking during animation

Hello everybody,

JQuery accordion animation (as well as simple hides / shows) looks weird with some browsers (IE, Opera). But Fire Fox and Chrome renders animation perfectly without artifacts. Html layout tends to shake with IE / Opera during animation as if surrounding paddings / margins are changed for small random value.

How can I minimize this effect. Is it jquery bug or browsers issue?

Only thing I can think of is the difference between MSIE and Gecko / Webkit is that "empty" or hidden divs take up space (in MSIE I think). That's led to me having 'shaking' effects before.

For example, I had a div at the top of my page, absolutely positioned and to be 'unhidden' when the user rolled-over an image. When the user rolled over, the page 'jumped' because the supposedly hidden div, moved. Only happened in IE.

LiverpoolsNumber9 2010-05-17 11:54:01

Also, not sure if this is relevant, but IE doesn't handle transparency well. For example, if you 'fadeTo' on bold text, when fading back to 1, it looks 'fuzzy'. Guessing this isn't the issue here, but just trying to think of jQuery animation issues.

LiverpoolsNumber9 2010-05-17 14:45:02

Ok, Let it be the browsers feature. I wonder if there are common workarounds for jquery animation. What to do and what you shouldn't to keep layout looks well.

Andrew Florko 2010-05-18 05:55:04

Well with regard to the opacity issue in IE I always do '$(element).removeAttr("style");' after the opacity comes back up to 1 which is still jerky, but at least removes the fuzziness.

LiverpoolsNumber9 2010-05-18 13:48:18

Andrew, this has an interesting solution too - http://stackoverflow.com/questions/1865806/jquery-fadeto-causing-pixelated-text-in-ie8-when-font-weight-bold

LiverpoolsNumber9 2010-05-21 12:41:13

ansaurus

tags:

views:

answers:

JQuery. Layout is shaking during animation

related questions