【发布时间】：2013-08-26 13:18:04
【问题描述】：
这是我在 chrome 中遇到的最奇怪的错误，很遗憾，由于法律限制，我无法向您展示示例图片，但我会尽力解释它。
所以我正在构建这个网站，它可以无限滚动浏览视口大小的部分。在第一部分中，我有一个表单和一个 html5 视频，其位置固定在背景中，然后是简单的背景图像用于后续部分，奇数部分带有 background-attachment: fixed;，这会产生一些视差效果。
现在非常奇怪的是：一旦我将一个表单输入集中在第一部分，所有带有background-attachment: fixed; 的部分都会丢失它们的背景图像......它仍然在 CSS 规则中，但没有得到渲染（只是白色）。
我尝试了几种类似问题的解决方案，例如 this SO thread 或 this post。现在第二个最有趣的事情是，如果我将-webkit-transform 或-scale 添加到具有固定背景图像的部分，问题会立即出现而没有任何聚焦......我真的无法弄清楚。
我希望有人可以帮助我解决这个问题，因为具有类似视差的行为非常重要。
这里有一个jsfiddle 无论如何都显示了问题，与我的页面上的不完全一样，但你可以看到错误，那里显示的是视频而不是图像，但在我的页面上，我将视频设置为滚动后的绝对位置到了第2部分，所以它只是白色的......
【问题讨论】：
-
你能用虚拟数据创建一个小提琴吗？
-
不幸的是，在 jsfiddle 上重建我的环境需要太多时间。但是我刚刚发现这显然是导致
background-attachment: fixed;中断的html5视频。 -
如果视频或其包装的位置固定或绝对...
-
我有完全相同的问题你找到解决方案了吗？
-
我在使用 Safari 时也遇到了非常奇怪的问题。我通过将我的 z-index 从 -1 更改为 0 来解决 Chrome 中的问题。但这似乎是相关的，因为从固定更改为相对解决了两个浏览器中的问题。 （但这当然不是解决方案）
标签： css google-chrome webkit html5-video