我已经遇到这个问题了一段时间，似乎是一个尚未解决的Chrome重绘错误。所以我正在寻找任何间隙修复。
主要的问题是当页面上的元素有一个背景图像时，它使用：@H_403_3@
background-attachment: fixed;
如果另一个元素是固定的并且有一个子视频元素，它会导致具有背景图像的元素消失。@H_403_3@
现在它在Safari(和Firefox和IE)中工作正常，所以它不是一个webkit的问题。我已经应用了几个被建议的属性无效。@H_403_3@
-webkit-backface-visibility: hidden; -webkit-transform: translate3d(0,0);
Initial Demo@H_403_3@
目前，我的解决方案只是通过媒体查询来定位具有固定bg图像的元素，只需关闭固定的背景属性。@H_403_3@
@media screen and (-webkit-min-device-pixel-ratio:0) {
background-attachment: scroll;
}
有任何想法吗？@H_403_3@
更新@H_403_3@
Working Demo感谢丹尼尔。@H_403_3@
更新2@H_403_3@
Better demo!@H_403_3@
截图至somesayinice和FourKitchens blog post@H_403_3@
解决方法
找到这个解决方案：
https://fourword.fourkitchens.com/article/fix-scrolling-performance-css-will-change-property
似乎是一个聪明的方式来使用：在伪元素之前。限制宽度固定宽度的元素，但对于全幅页面的伟大工程。基本上出来看起来像这样：@H_403_3@
.background_fill {
overflow: hidden;
position: relative;
color: red;
}
.background_fill:before {
background-color: white;
background-size: cover;
z-index: -3;
content: " ";
position: fixed;
background: url('http://www.lausanneworldpulse.com/pdfs/brierley_map_0507.jpg') no-repeat center center;
will-change: transform;
width: 100%;
height: 100%;
}
<div class="background_fill"> <div>this is on a background this is on a background this is on a background this is on a background this is on a background this is on a background this is on a background this is on a background this is on a background this is on a background this is on a background this is on a background this is on a background this is on a background this is on a background this is on a background this is on a background this is on a background this is on a background this is on a background this is on a background this is on a background this is on a background this is on a background this is on a background this is on a background this is on a background this is on a background this is on a background this is on a background this is on a background this is on a background this is on a background this is on a background this is on a background this is on a background this is on a background this is on a background this is on a background this is on a background this is on a background this is on a background this is on a background this is on a background this is on a background this is on a background this is on a background this is on a background this is on a background this is on a background this is on a background this is on a background this is on a background this is on a background this is on a background this is on a background this is on a background this is on a background this is on a background this is on a background this is on a background this is on a background this is on a background this is on a background this is on a background this is on a background this is on a background this is on a background this is on a background this is on a background</div> <div>this is on a background</div> <div>this is on a background</div> <div>this is on a background</div> <div>this is on a background</div> <div>this is on a background</div> </div>
