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

Question

我有一段时间没有这个问题,它似乎是一个尚未修复的Chrome重绘错误.所以我正在寻找任何止损修复.

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

background-attachment: fixed;

如果另一个元素被修复并且具有子视频元素,则会导致具有背景图像的元素消失.

现在它在Safari(以及Firefox和IE)中运行良好,因此它不是一个webkit问题.我已经应用了几个被认为无用的属性.

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

初始演示

目前,我的解决方案是通过媒体查询以固定的bg图像为目标,然后关闭固定的背景属性.

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

有任何想法吗？

更新

丹尼尔感谢工作演示.

更新2

更好的演示!

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

Answer 1

由于固定定位的背景似乎在Chrome中无缘无故地破解,因此您可以尝试使用clip和position:fixed属性.它不是很清楚,但是在绝对定位元素上设置时的剪辑属性实际上甚至会裁剪固定定位的子元素.

然而,存在一些缺点.最重要的是,由于某种原因,这个技巧在iOS上无法完美地工作,而浏览器在用户滚动时渲染整个图像时会遇到麻烦(你会得到一个弹出效果).这不是一个过分重要的东西,但也许你应该考虑的事情.当然,你仍然可以通过使用一些巧妙的javascript回归到固定的背景来解决这个问题.另一个iOS解决方法是仅仅使用-webkit-mask-image: -webkit-linear-gradient(top, #ffffff 0%,#ffffff 100%)它基本上是webkit特定的替代方案clip: rect(auto,auto,auto,auto)(即裁剪容器外的所有东西).

我做了一个JSFiddle(codepen不想和我一起玩)的实现例子,你怎么做到这一点.特别是在看.moment,.moment-image而新.moment-clipper.

我希望这有一些帮助!

更新:现在不推荐使用剪辑以支持剪辑路径,但在所有浏览器中仍然支持写入.然而,可以通过以下方式实现相同的效果

-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
overflow: hidden;

position: absolute容器上不再需要.对剪辑路径的支持似乎相对有限,只有Chrome和Safari目前支持前缀.最安全的赌注可能包括剪辑和剪辑路径,因为它们似乎不会相互干扰.

我已经更新了上面的小提琴,还包括剪辑路径.

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