小编典典

固定背景固定和位置固定元素的Chrome问题

css

我已经有一段时间了，这似乎是一个Chrome重绘错误，尚未修复。因此，我正在寻找任何权宜之计。

主要问题是页面上的元素具有使用以下内容的背景图像时：

background-attachment: fixed;

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

现在，它可以在Safari（以及Firefox和IE）中正常运行，因此这并不是Webkit的问题。我已经应用了一些没有用的建议属性。

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

目前，我的解决方案只是通过媒体查询以固定的bg图片定位元素，然后关闭固定的background属性。

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

~~有任何想法吗？~~

更新资料

感谢Daniel的
工作演示。

更新2

更好的演示！

大喊答题节目环节以somesayinice和FourKitchens博客文章

阅读 300

2020-05-16

共1个答案

小编典典

在以下位置找到了此解决方案

在我看来，使用：before伪元素是一种聪明的方法。限制固定宽度元素的宽度，但对全角页面效果很好。本质上看起来像这样：

.background_fill {

  overflow: hidden;

  position: relative;

    color: red;

}

.background_fill:before {

  background-color: white;

  background: url('http://www.lausanneworldpulse.com/pdfs/brierley_map_0507.jpg') no-repeat center center;

  background-size: cover;

  z-index: -3;

  content: " ";

  position: fixed;

  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</div>

  <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</div>

  <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</div>

  <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</div>

  <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</div>

  <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</div>

  <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</div>

  <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</div>

  <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</div>

  <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</div>

  <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</div>

  <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</div>

  <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</div>

  <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</div>

  <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</div>

  <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</div>

</div>

作为解决这个非常烦人的bug的一种方式，对我来说非常有用。

2020-05-16