Chrome：拥有 HTML5 视频位置：固定或绝对导致所有背景附件：固定中断

Posted 2023-03-06

【中文标题】Chrome：拥有 HTML5 视频位置：固定或绝对导致所有背景附件：固定中断

【英文标题】：Chrome: Having an HTML5 video position: fixed or absolute causes all background-attachment: fixed to break

【发布时间】：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 中的问题。但这似乎是相关的，因为从固定更改为相对解决了两个浏览器中的问题。 （但这当然不是解决方案）

【参考方案1】：

我也遇到过这个问题。

问题是背景位置会根据浏览器窗口将内容固定在该位置。

对于视差效果，请尝试使用一些插件

【讨论】：

我们为此使用了插件 ;)