css – Chrome问题与背景附件固定和位置固定元素

我已经遇到这个问题了一段时间，似乎是一个尚未解决的Chrome重绘错误。所以我正在寻找任何间隙修复。

主要的问题是当页面上的元素有一个背景图像时，它使用：

background-attachment: fixed;

如果另一个元素是固定的并且有一个子视频元素，它会导致具有背景图像的元素消失。

现在它在Safari(和Firefox和IE)中工作正常，所以它不是一个webkit的问题。我已经应用了几个被建议的属性无效。

-webkit-backface-visibility: hidden;
-webkit-transform: translate3d(0,0);

Initial Demo

目前，我的解决方案只是通过媒体查询来定位具有固定bg图像的元素，只需关闭固定的背景属性。

@media screen and (-webkit-min-device-pixel-ratio:0) {
background-attachment: scroll;
}

有任何想法吗？

更新

Working Demo感谢丹尼尔。

更新2

Better demo!

截图至somesayinice和FourKitchens blog post

解决方法

找到这个解决方案： 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>

对我来说，这是一个很好的办法来解决这个非常讨厌的错误。