【问题标题】：Chrome issue with background-attachment fixed and position fixed elements背景附件固定和位置固定元素的 Chrome 问题
【发布时间】：2014-06-27 14:30:56
【问题描述】：

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

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

background-attachment: fixed;

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

现在它在 Safari（以及 Firefox 和 IE）中运行良好，因此它不完全是 webkit 问题。我已经应用了几个建议但无济于事的属性。

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

Initial Demo

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

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

~~有什么想法吗？~~

更新

~~Working Demo 感谢 Daniel。~~

更新 2

Better demo!

向somesayinice 和FourKitchens blog post 致敬

【问题讨论】：

是您的问题，因为背景图片未在 chrome 中加载
没有加载背景图像，这是导致问题的背景附件：已修复。如果你把它关掉，它们可以工作，但不是固定的。
我遇到过这个问题很多次了，而且似乎总是能解决这个问题的可怕黑客正在添加：“transform: translateZ(0);”到固定的div。似乎强制渲染，但显然是以牺牲一些性能为代价的。
使用最新版本的 Chrome，似乎无法与文本进行交互（突出显示、单击等）——知道为什么会这样吗？
@StevedeNiese ，这在 FireFox 中破坏了它。

标签： css google-chrome webkit fixed background-attachment

【解决方案1】：

由于固定定位的背景在 Chrome 中似乎无缘无故地中断，您可以尝试使用 clip 和 position:fixed 属性。这不是很为人所知，但是当在绝对定位元素上设置 clip 属性时，实际上甚至会裁剪 fixed 定位的子元素。

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

我做了一个JSFiddle（codepen 不想和我一起玩）实现示例来说明如何做到这一点。具体看.moment、.moment-image 和新的.moment-clipper。

希望对你有所帮助！

更新：Clip 现在被弃用，取而代之的是 clip-path，但截至目前，所有浏览器仍然支持。但是，可以通过以下方式实现相同的效果：

-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 不再需要在容器上。对 clip-path 的支持似乎相对有限，目前只有 Chrome 和 Safari 支持它的前缀。最安全的选择可能是同时包含剪辑和剪辑路径，因为它们似乎不会相互干扰。

我已经更新了上面的小提琴，也包括了剪辑路径。

【讨论】：

这很好，但仅供参考：这在 Firefox 或 IE 中不起作用。
你说的是移动端FF和IE吗？对我来说，它至少适用于 IE9+ 和 FF 16+

【解决方案2】：

一个迟到的答案，但我想到了这个，不知何故我为这个做了一个破解。

这个想法是创建一个内部元素来保存背景图像，并与background-attachment:fixed 属性相同。

由于这个属性使背景图像的位置相对于窗口，我们必须在它的容器内移动内部元素，这样我们就会得到这种效果。

var parallax_container = $(".parallax_container");
/*Create the background image holder*/
parallax_container.prepend("<div class='px_bg_holder'></div>");
$(".px_bg_holder").css({
    "background-image" : parallax_container.css("background-image"), /*Get the background image from parent*/
    "background-position" : "center center",
    "background-repeat" : "no-repeat",
    "background-size" : "cover",
    "position" : "absolute",
    "height" : $(window).height(), /*Make the element size same as window*/
    "width" : $(window).width()
});
/*We will remove the background at all*/
parallax_container.css("background","none");
parallax_container.css("overflow","hidden");/*Don't display the inner element out of it's parent*/
$(window).scroll(function(){
    var bg_pos = $(window).scrollTop() - $(".parallax_container").offset().top; /*Calculate the scrollTop of the inner element*/
    $(".px_bg_holder").css({
        "margin-top" : bg_pos+"px"
    });
});
$(window).resize(function(){
    $(".px_bg_holder").css({
        "height" : $(window).height(),
        "width" : $(window).width()
    });
});

【讨论】：

为发布您的解决方案而欢呼。很高兴看到人们仍在发布解决方案，即使帖子已经过时

【解决方案3】：

我的问题是我在文档中有动画 3d 变换悬停 div

.anim-y360:hover {
    -webkit-transform: rotateY(360deg);
    ...
}

每次我运行动画时，固定图像都会消失。

解决方法很简单：

.anim-y360 {   
   z-index: XX;
   ...
}

其中 XX 高于固定位置图像的 z-index。

【讨论】：

【解决方案4】：

您好，这很简单，无需添加任何 webkit 和媒体标签，只需按照下面的操作即可

步骤我在下面的容器中删除了背景 Url 标签

.content .container { /* 背景: url(http://beeverlyfields.com/wp-content/uploads/2015/02/bgBeeverly4.jpg); */

我在 class="container" 中添加了 img src 标签并定位为 fixed 和 top=0

现在它在 chrome-40 和 IE 中工作

【讨论】：

【解决方案5】：

正如Raphael Rychetsky 在this great pen 上看到的那样，translate3d 可能是麻烦制造者。

如果您使用transform: translate3d(0,0,0)，请尝试将其替换为transform: translate(0,0)，它应该可以解决问题。至少它对我有用。

【讨论】：

【解决方案6】：

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

在我看来，使用 :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>

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

【讨论】：

这似乎是一个很好的方法。我会调查的。谢谢！
我正在改变你的答案。它不仅可以在现代浏览器中使用，我还可以在没有 hacky 解决方案的情况下恢复我的固定背景。惊奇！
这很好，但如果你有多个这样的背景怎么办？我正面临这个挑战。到目前为止，我最好的解决方案是在部分滚动到视图时更改每个背景的 z-index，但效果不佳。
为什么不在一个 div 中使用多个 div 都使用相同的滚动背景？我不确定您的用例。 @本杰明
只是一个小错误：移动background-size: cover; 下面 background: url(..);，因为后者覆盖了前一个属性声明。

【解决方案7】：

这个问题通常是因为 HTML5 视频而出现的。只需使用样式规则将其包装在 dom 元素中 position: relative;和溢出：隐藏；这将修复所有浏览器中的所有问题！

【讨论】：

【解决方案8】：

我从https://www.fourkitchens.com/blog/article/fix-scrolling-performance-css-will-change-property/找到了解决方案

就我而言，只需将此属性放入固定背景的 div 中即可。

will-change : transform;

【讨论】：

是的，这已经是此问题的选定答案。谢谢你:)