我已经遇到这个问题了一段时间,似乎是一个尚未解决的Chrome重绘错误。所以我正在寻找任何间隙修复。
主要的问题是当页面上的元素有一个背景图像时,它使用:
background-attachment: fixed;
如果另一个元素是固定的并且有一个子视频元素,它会导致具有背景图像的元素消失。
现在它在Safari(和Firefox和IE)中工作正常,所以它不是一个webkit的问题。我已经应用了几个被建议的属性无效。
-webkit-backface-visibility: hidden; -webkit-transform: translate3d(0,0);
目前,我的解决方案只是通过媒体查询来定位具有固定bg图像的元素,只需关闭固定的背景属性。
@media screen and (-webkit-min-device-pixel-ratio:0) { background-attachment: scroll; }
有任何想法吗?
更新
Working Demo感谢丹尼尔。
更新2
解决方法
找到这个解决方案:
https://fourword.fourkitchens.com/article/fix-scrolling-performance-css-will-change-property
似乎是一个聪明的方式来使用:在伪元素之前。限制宽度固定宽度的元素,但对于全幅页面的伟大工程。基本上出来看起来像这样:
.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>