Chrome问题（与背景附件固定和位置固定元素） [英] Chrome issue with background-attachment fixed and position fixed elements

问题描述

我有一段时间遇到这个问题，似乎是Chrome重画错误，尚未修正。

I've had this issue for a while and it seems to be a Chrome redraw bug that hasn't been fixed. So I'm looking for any stop-gap fixes.

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

The main issue is that when an element on the page has a background image that uses:

background-attachment: fixed;

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

If another element is fixed and has a child video element it causes the element with the background image to disappear.

现在它在Safari（和Firefox和IE）中正常工作，因此它不是一个webkit问题。我已经应用了几个已建议无效的属性。

Now it works fine in Safari (and Firefox and IE) so it's not exactly a webkit issue. I've applied several properties that have been suggested to no avail.

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

初始演示

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

Currently my solution is just to target the elements with a fixed bg image via a media query and just turn off the fixed background property.

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

任何想法？

工作演示。感谢Daniel。

Working Demo thanks to Daniel.

更好的演示

Shoutout到 somesayinice 和 FourKitchens博客文章

Shoutout to somesayinice and FourKitchens blog post

推荐答案

找到此解决方案： https://fourword.fourkitchens.com/article/fix-scrolling-performance-css-will-change-property

似乎是一种聪明的方式来使用：before伪元素。限制固定宽度元素的宽度，但适用于全宽页面。基本上看起来像这样：

Seems to me to be a clever way to use :before pseudo element. Limit the width for fixed width elements but works great for full width pages. Essentially comes out to look like this:

.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>

对我来说是一个很好的方法来解决这个烦人的bug。

Works great for me as a way of getting around this very annoying bug.

这篇关于Chrome问题（与背景附件固定和位置固定元素）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！