1

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?

Andrew Florko
  • 7,672
  • 10
  • 60
  • 107

1 Answers1

0

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
  • 2,384
  • 3
  • 22
  • 34
  • 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 May 17 '10 at 14:45
  • 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 May 18 '10 at 05:55
  • 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 May 18 '10 at 13:48
  • Andrew, this has an interesting solution too - http://stackoverflow.com/questions/1865806/jquery-fadeto-causing-pixelated-text-in-ie8-when-font-weight-bold – LiverpoolsNumber9 May 21 '10 at 12:41