固定的背景图像在固定位置滚动时跳转 <video> 在页面上

Question

I've come across a strange problem and have no idea how to fix it. See the example:

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

I have 3 divs and a video element. The video is position:fixed at the top of the page so the 3 divs scroll over it. The first has a solid colour background, the second has no background so the video is revealed when it scrolls over. The third has a background image that is fixed in it's position.

Here's the problem: when the 3rd div with the background image reaches the video, the "fixed" background image suddenly jumps.

This happens in the latest versions of Chrome and Safari but not Firefox.

Any idea what's going on and how to solve?

Answer 1

尝试不带“固定”的背景图片。

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

Answer 2

尝试使用z-index:-1的背景；