修复了在页面上以固定 <video> 位置滚动时背景图像跳转的问题

Question

我遇到了一个奇怪的问题，不知道如何解决。看例子：

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

我有 3 个 div 和一个视频元素。视频的位置：固定在页面顶部，因此 3 个 div 滚动它。第一个有纯色背景，第二个没有背景，因此视频在滚动时会显示出来。第三个有一个固定在其位置的背景图像。

问题来了：当带有背景图像的第 3 个 div 到达视频时，“固定”的背景图像突然跳动。

这发生在最新版本的 Chrome 和 Safari 中，但不是 Firefox。

知道发生了什么以及如何解决吗？

Answer 1

用z-index:-1试试背景；

Answer 2

试试没有“固定”的背景图片。

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