纯CSS视差效果与视频背景

Question

我正在尝试使用纯CSS创建视差效果，并在第一帧上设置视频背景。该效果在Firefox和IE9+中表现良好，但Chrome会在所有带有“background-attachment：fixed”的帧上产生撕裂效果。

我之前在这里找到了一个奇怪的HTML布局和CSS剪辑的答案，但我似乎找不到它了。那段代码的问题是我无法将帧设置为最小高度，并允许内容在较小的视口上轻松重新流动。

这里有很多类似的问题，但似乎没有真正解决或者他们正在引用一个旧的错误，现在已经被修复了。如果我删除视频，则background-attachment属性的行为符合预期。也许这些问题有关联？

示例：http://codepen.io/cluke009/pen/cdHJu HTML

<div id="slide0" class="slide"></div>
<div id="slide1" class="slide"></div>
<div id="slide2" class="slide">
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>....
</div>
<div id="slide3" class="slide">
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>....
</div>
<div id="slide4" class="slide"></div>
<div id="slide5" class="slide"></div>

CSS

body,
html {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
p{
    margin: 0;
    padding: 10px 5%;
}
video {
    z-index: -9999;
    position: fixed;
    right: 0;
    bottom: 0;
    width: auto;
    height: auto;
    min-height: 100%;
    min-width: 100%;
}
.slide {
    box-sizing: border-box;
    height: auto;
    min-height: 100%;
    min-width: 100%;
    background-size: cover;
    box-shadow: inset 0 10px 10px rgba(0,0,0,.3);
}

.slide:nth-child(even) {
    background-attachment: fixed;
}
#slide1{
  background-image:url(http://www.placekitten.com/1000/900);
}
#slide2{
  background-image:url(http://www.placekitten.com/600/400);
}
#slide3{
  background-image:url(http://www.placekitten.com/1000/1000);
}
#slide4{
  background-image:url(http://www.placekitten.com/1000/800);
}

- Cluke009

---

你说的“tearing effect”是什么意思？ - Brett DeWoody

我们需要知道您所说的“tearing effect”是什么意思。如果您的意思是滚动时出现了像小步骤一样的效果，而不是平滑的效果，那么这是由于程序本身的实现方式造成的。您可以编写一个脚本来检测滚动，防止它并使用缓入缓出的效果进行动画处理。 - Vandervals

Chrome 上唯一引人注目的问题是视频实际上会出现像素化，这就是你所说的“撕裂”吗？ - Jason Lydon

刚在Windows上的Chrome上测试了一下，所以这可能只是Mac上的问题，我现在在家无法测试。他们也可能已经修复了这个错误，但我记得最近在工作中看到过它。基本上会出现卡顿或者像素点的效果，你可以看到背景图像中的洞。由于我能够想出一个合理的妥协方案，所以我已经放弃了这种特定的用法，自从我最初发布以来。如果我有时间从我的项目中提取相关代码，我会更新这个问题。 - Cluke009

Answer 1

我认为撕裂效果意味着从带小猫和文字的画面到下一个孤独阴影之间出现奇怪的间隙。

你的问题可能是重复的Chrome中使用background-attachment fixed和position fixed元素的问题

- Philip Dernovoy