纯CSS视差效果与视频背景

Question

我想创建一个视差效果使用纯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 issue with background-attachment fixed and position fixed elements