I have illustrated my problem in the following Fiddle; http://jsfiddle.net/6CTMs/
The background of the wrapper is an image with a white hole in the middle. This hole is then covered by the block element.
Now I want to animate the background and the block moving up. I'm simultaneously animating the background position (via the included background position animation plugin) and the top attribute of the block element.
However, at least on my Chrome 21.0.1180.79 on Win7, these two animations are not entirely in sync. It seems every other frame of animation, a white band (revealing a one-pixel high slice of the hole underneath) shows at the bottom, and every other frame it doesn't.
How can I avoid this?
Including the background image in a child element and only animating the top attribute of that is not an option in my case. I also can't make the element one pixel taller or any 'hack' like that - the dimensions and animations need to be precise.
As a sidenote, I think that this issue may perhaps be related to an earlier question of mine, which never fully got resolved.
EDIT: I've forked the Fiddle here; http://jsfiddle.net/3r26H/1/ Seems to work but it looks like it leaves one pixel off at the end of the animation. I also don't know if this creates new issues in non-Webkit browsers. How kosher is this solution?
According to this thread : JQuery synchronous animation it's impossible to sync two animations in JQuery. What you can do through, is animate the whole thing "by hand", using requestAnimationFrame and making the right computations at each frame so that both elements are sync.