防止背景视频滚动，但保持自然的滚动行为

Question

我正在向网页添加背景视频，并希望当用户滚动超过坐姿的高度（例如，保险杠）时避免视频移动。

通过添加以下css，我设法做到了：

body {
  overflow: hidden;
}

main {
  height: 100vh;
  overflow: auto;
}

尽管此方法有效，但该网站在Firefox和Chrome上感觉更加僵硬，因为main元素将没有body所具有的滚动缓冲器。

是否有办法：

1. 避免在背景视频上使用滚动杠，或者，
2. 将滚动杠添加到main元素

在Chrome或Firefox中查看此jsfiddle，并查看与Safari的区别。您可以在CSS部分中（取消）注释相关代码。

以下是一些不同行为的GIF：

1. 带有白色保险杠的原始（不良）行为

   

2. 行为：文本碰碰但视频保持静态（Safari）

3. Chrome和Firefox上的相同代码让人感到僵硬

Answer 1

我发现此错误可能是由页面上某些-webkit-transform元素具有的fixed属性引起的。

而且，我发现在该固定元素上设置此设置可能会有所帮助：

-webkit-transform: translateZ(0);

或者您也可以尝试

-webkit-transform:translateZ(1px);
-moz-transform:translateZ(1px);
-o-transform:translateZ(1px);
transform:translateZ(1px);