私は次のフィドルで私の問題を説明しました。http://jsfiddle.net/6CTMs/
の背景はwrapper
、中央にホワイトホールがある画像です。次に、この穴はblock
要素で覆われます。
次に、背景と上に移動するブロックをアニメーション化します。(付属の背景位置アニメーションプラグインを介して)背景位置と要素のtop
属性を同時にアニメーション化していblock
ます。
ただし、少なくともWin7のChrome 21.0.1180.79では、これら2つのアニメーションは完全に同期していません。アニメーションの1フレームおきに、白い帯(下の穴の1ピクセルの高さのスライスを示す)が下部に表示され、1つおきのフレームには表示されないようです。
どうすればこれを回避できますか?
子要素に背景画像を含め、そのtop属性のみをアニメーション化することは、私の場合のオプションではありません。また、要素を1ピクセル高くしたり、そのような「ハック」を行うことはできません。寸法とアニメーションは正確である必要があります。
ちなみに、この問題は、完全には解決されなかった私の以前の質問に関連している可能性があると思います。
編集:私はここでフィドルをフォークしました。http://jsfiddle.net/3r26H/1/動作しているように見えますが、アニメーションの最後で1ピクセル離れているように見えます。また、これがWebkit以外のブラウザーで新しい問題を引き起こすかどうかもわかりません。このソリューションはどのようにコーシャですか?