纯视频背景的CSS视差效果

Question

我正在尝试使用纯CSS创建视差效果,该CSS在第一帧上也有视频背景.这种效果在Firefox和IE9 +中运行良好,但Chrome对所有具有"background-attachment:fixed"的帧都有撕裂效果.

我确实设法找到了一个答案,然后使用奇怪的HTML布局和CSS剪辑,但我似乎无法再找到它.该代码的问题在于我无法将帧设置为最小高度并允许内容在较小的视口上轻松重排.

这里有很多类似的问题但是它们似乎都没有真正得到回答,或者它们引用的是现在似乎已修复的旧bug.如果我删除视频,则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);
}

Answer 1

我认为撕裂效果意味着从带有小猫和文字的框架到下一个孤独的影子之间的奇怪间隙。

您的问题可能与后台附件固定和位置固定元素的 Chrome 问题重复