Firefox animation redrawing bug + Fix!
I've been using the YUI Animation tools on a couple of projects recently, and I keep coming across problems in Firefox, the performance of the animations is appalling compared to IE and Safari. Now I love Firefox as much as the next geek, but sometimes it really pisses me off. The bug that's really been bothering me for weeks occurs when you animate the position of an element within an overflow:hidden element. Such as sliding something out of view in a little window, which has been a common requirement so far! The blue rectangle shows where the sliding div currently is. It's higher than the containing box because that box animated it's height from where it was to the height of the new content, clipping the original content. The jagged purple line on the bottom left is part of the box border being repeated across the page as it animates. The div is being moved with a negative margin. I've also had this problem when animating the width of a div down to 1 while the opacity goes from 1 to 0, You then see the right border of the div smeared across one side and fading out. As soon you resize the window or scroll the smearing out of view and back again, it's gone! The solution is to set the inner div to overflow:hidden too. Even though you don't set a height on it so you never see the clipping being applied on that div, it stops Firefox sampling and redrawing content that isn't actually part of that div. This seems to have no affect in IE. If you have any other similar problems or alternative solutions, let me know!