CSS Overflow Side Effect Involving Rad Editor and jQuery .animate

Question

I have the following items in a web page:

• an instance of the Editor from Telerik's RadControls for ASP.NET AJAX: call it "Editor"
• a div that can change position by means of jQuery's .animate function: call it "divAnimate"
• a div with a css overflow setting inside divAnimate: call it "divOverflow"

When divAnimate moves, the part of Editor it resides under (or moves to be under) moves slightly and then pops back into its normal position when divAnimate stops moving. This happens when the style for divOverflow includes an overflow setting.

If divOverflow's overflow style is removed, Editor does not move at all when divAnimate moves.

The described behavior occurs in Firefox (FF 3.5.1), not in Internet Explorer (IE8).

Has anyone bumped into this and solved it?

Answer 1

Try removing the overflow before beginning the animation. Use the version of animate that provides a callback to add the overflow back when it is complete.

animate( params, [duration], [easing], [callback] )