Sorry if this is a known bug but I’ve been trying to figure this out for some hours now (Google searches and my own testing).
-
I have a parent container that’s being floated right.
-
The parent container consists of 10 divs that each contain an h3 and another div. When clicked, the animate() event is triggered and the div is shown. Basically an accordion style setup.
-
I’ve narrowed down the performance stutter/lag to the float:right
css attribute on the parent container. -
Removing this causes the events to become smooth as they should.
-
But doing so breaks my layout. I have also tested it in safari 5.0, ie8, and chrome and all events are smooth when the float:right is on. Firefox is my only problem. Also, Using slideToggle() gave me the same lagging results. Is this something that’s a known issue with firefox/jquery and floats? I’m using the current jquery library.
First of all, read this article using google translator (from russian) http://chikuyonok.ru/2010/11/optimization-story/
Solution:
Before animate you need to convert (temporarily) your float-right style into position:absolute without float. Maybe you need to compute future div dimensions (height/width) and use them in animation. Maybe you need to set fixed height to parent before animation.
Animate absolutely positioned div
After animations, convert position:absolute style back to float:right
It will be better if you start and end point static position will not have
styleattribute (all in css classes). In this case to restore standart style you just need to .removeAttr(‘style’)