css - 位置を固定してスクロールすると背景画像がジャンプする問題を修正ページ上

Question

奇妙な問題に遭遇しましたが、それを修正する方法がわかりません。例を参照してください。

http://jsfiddle.net/9wqsr/1/

3 つの div と 1 つのビデオ要素があります。ビデオはページの上部に位置:固定されているため、3 つの div がその上をスクロールします。1 つ目は無地の背景で、2 つ目は背景がないため、スクロールするとビデオが表示されます。3 番目には、その位置に固定された背景画像があります。

問題は次のとおりです。背景画像のある 3 番目の div がビデオに到達すると、「固定された」背景画像が突然ジャンプします。

これは最新バージョンの Chrome と Safari で発生しますが、Firefox では発生しません。

何が起こっているのか、どのように解決するのか考えていますか?

Answer 1

「固定」なしの背景画像を試してください。

 background: yellow url(http://jsfiddle.net/img/top-bg.png) 10px 0 repeat;