在使用CSS变换时，Chrome中的固定附属背景图像会闪烁/消失

Question

我目前正在制作一个视差网站主题。需要将背景图片固定在特定的“div”和“section”上，以避免jQuery介入所有内容。问题是，在进行变换时，下方任何动画项的背景图像都会消失，只有在Google Chrome浏览器中出现此问题。解决方法？

- BlackPanther

Answer 1

这是一个非常普遍的未解之谜。最近我也遇到了同样的问题，而'-webkit-backface-visibility: hidden'在我的'固定'附加背景上被证明是毫无用处的，因为当它被设置时，背景就会消失。（附加信息：原因是当将背景设置为固定时，几乎相当于在背景中放置一个固定的'div'并将原始'div'背景设置为透明。隐藏背面做出了显而易见的效果）。

为解决当前问题，请尝试将元素的'position'属性设置为'static'，或者如果您已经给它赋予了其他值，即'relative'、'fixed'或'absolute'，只需删除这些值。

如果您不记得设置位置属性，并且问题仍然存在，我建议您在chrome或firefox上使用调试工具来

确保除'static'以外没有手动设置'position'属性的值。

刚刚花了半个小时搜寻...认为这可能会让你更容易解决问题...问候。

- BlackPanther

---

这个方法是有效的，但是要补充一下，具有“fixed”背景图像的元素的所有父元素（追溯到根据body和html）都必须具有除“relative”、“fixed”或“absolute”以外的其他position属性 - 不仅是具有图像的元素。这真的很遗憾。这个漏洞已经修复了吗？ - atwixtor

这对我也解决了问题，我的父元素上有一个position: relative。一旦移除它就可以工作了。 - Joseph Race

我从CSS中删除了backface-visibility: hidden;后，它就起作用了。 - iamjustaprogrammer

在我的情况下，容器应用了 backface-visibility: hidden，当我将其移除后它就起作用了。不确定这是否有帮助，但还是想分享一下。 - Leo

哇！终于解决了我的问题，虽然我几乎要通过谷歌搜索来达到目的，但至少我可以通过“保持”background-attachment: fixed属性来重现/修复并获得一个可行的解决方案！所以我确认：如果任何包含具有background-attachment:fixed图像的元素的容器具有另一个位置属性而不是static，这正是我的情况，那么在视网膜显示器上的Chrome中将发生绘画问题！ - Marc

Answer 2

同样的问题也发生在我这里。我使用position:fixed;创建了一个粘性标题，在PC Chrome 34浏览器中会闪烁。我尝试了这个线程中的解决方案，但是在父元素使用position:static;会破坏其他部分。但是我知道添加-webkit-transform: translate3d(0,0,0);基本上会让Chrome将html转换为图层，从而不会被重新绘制。这对我很有用。

element {
  position:fixed;
  top:0;
  left:50%;
  width:960px;
  height:50px;
  margin-left:-480px;
  -webkit-transform: translate3d(0,0,0);
  /* ...all other CSS... */
}

更新
未来友好的解决方案是使用will-change属性创建一个图层！
W3规范
CanIUse
MDN定义

element {
      position:fixed;
      top:0;
      left:50%;
      width:960px;
      height:50px;
      margin-left:-480px;
      will-change:top;
      /* ...all other CSS... */
    }

说实话，这似乎是一种奇怪的解决闪烁问题的方法，但本质上它使元素成为一个层，与translate3d()相同。

- Jason Lydon

---

不错的输入。'will-change' 对我来说是新事物。但是请注意，如果将其用于像 'body' 这样的元素上，则只有在 叶节点 附近才能发挥作用，否则这种解决方案是不好的实践。 - BlackPanther

谢谢！我也遇到了background-attachment: fixed;的相同问题。添加-webkit-transform: translate3d(0,0,0);对我有用。 - ptguy

添加-webkit-transform: translate3d(0,0,0)将禁用Firefox上的background-attachment fixed。 - Abdul Rab Memon

Answer 3

可能回答有点晚了，但似乎在Chrome中使用background-attachment：fixed属性时会出现错误。我发现将其值更改为“scroll”可以解决此问题。这会导致Firefox上的抖动效果，但您可以在CSS中使用媒体浏览器查询来避免这种情况，类似于以下内容：

.yourstellarlayer{
     background-attachment: fixed;
}
/*only for webkit  browsers*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
    .yourstellarlayer{ 
        background-attachment: scroll;
    }
}

希望能对您有所帮助！

- Santirisco

---

是的，这确实是另一种方法... 但会从Chrome浏览器中移除固定背景视差效果。实际上并不是一个好主意，因为Chrome是最广泛使用的浏览器之一。希望他们能修复这个错误。无论如何，感谢您的评论.. :) - BlackPanther

不完全正确...在chrome浏览器中，必须将"fixed"属性更改为"scroll"来修复此错误...使用此修复方法，在chrome和firefox浏览器中我看到了相同的效果... 在这里检查：http://www.deletec.info/memoria2012/maqueta/html/ - Santirisco

@Santirisco：这会导致我们在视差效果上失去优势。 - Sunny R Gupta

@Sunny R Gupta：我坚持认为，完全没有问题。请查看此处的示例，您将会看到在Firefox中使用此修复程序与Chrome中产生完全相同的视差效果：http://deletec.info/memoria2012/ - Santirisco

Answer 4

我在使用Chrome时遇到了同样的问题，这似乎是一个bug，当页面内部有太多内容时会发生。我通过将以下转换代码添加到固定位置元素中解决了它， (transform: translateZ(0);-webkit-transform: translateZ(0);) 这会强制浏览器使用硬件加速来访问设备的图形处理单元(GPU)，以使像素飞行。另一方面，Web应用程序在浏览器的上下文中运行，这使得软件可以执行大部分（如果不是全部）的渲染，导致过渡效果的驱动能力更小。但Web正在追赶，并且现在大多数浏览器供应商都通过特定的CSS规则提供图形硬件加速。

使用-webkit-transform: translate3d(0,0,0);将启动GPU以进行CSS过渡，使它们更流畅（更高的FPS）。

注意：translate3d(0,0,0)在你所看到的内容方面没有任何作用。它通过x、y和z轴将对象移动0像素。它只是一种强制硬件加速的技术。

#element {
    position: fixed;
    /* MAGIC HAPPENS HERE */
    transform: translateZ(0);
    -moz-transform: translatez(0);
    -ms-transform: translatez(0);
    -o-transform: translatez(0);
    -webkit-transform: translateZ(0);
    -webkit-font-smoothing: antialiased; /* seems to do the same in Safari Family of Browsers*/
}

- Neo

---

这应该附加到导致问题的元素上。非常感谢你，你太棒了！ - Guy Mazuz

在我的情况下，是.slick-track导致了问题。 - Dan

Answer 5

这个问题让我很烦恼，几乎毁了我的晚上。我的解决方法是设置

标签的属性。

background-attachment: scroll;

它在我的项目上起作用。
在此之前，我将其设置为固定值。希望这能有所帮助。

- Ming Huang

Answer 6

对于我来说，问题出在固定背景的div的父元素上附加的样式。我向我的固定div的两个主要父元素添加了-webkit-backface-visibility: inherit;。

在我的情况下，我正在使用Foundation off-canvas，所以代码如下：

.off-canvas-wrap{
    -webkit-backface-visibility:inherit;
}

.inner-wrap{
    -webkit-backface-visibility:inherit;
}

- Fabian Rios

Answer 7

我们曾遇到过一个类似的问题，一个 position: fixed; 元素包含了一个相对定位的容器，内部有一张绝对定位的图片。在 CSS 过渡中，图片会消失，当过渡完成后又重新出现。

我们尝试通过将 -webkit-backface-visibility 设置为 hidden 来解决这个问题，包括 body 元素在内的多个元素都试过了，但是这并没有起作用。借助这个线程，我们使用 Chrome 的 Web Inspector 修改了元素的 position 属性，并且幸运地解决了这个问题，而不必对网站进行太多调整。（我们只需要将固定元素的父级容器位置改为 static）

- lmeurs

Answer 8

五年后的更新...这仍然似乎是Chrome的一个问题。我尝试了大多数提到的解决方案，包括添加：

transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);

这个问题还没有被解决，添加 background-attachment: scroll 会使网站的UX关键视差效果消失。上述提到添加父元素的解决方案对我没有任何改变。有最近遇到此问题并有其他想法的人吗？我在前端使用Gatsby(React)。

- Dmitriy

---

你找到任何解决方案了吗？我也遇到了这个问题。 - Ninad Walanj

Answer 9

所以我使用的是Chrome 40版本，仍然遇到了这个问题。目前对我有效的解决方法是创建一个内部div，在该div上设置相对定位，并使其高度适应父元素，并在父div上设置背景附着为fixed：

<section style="background-attachment: fixed;">
 <div style="position: relative;">
  // Code goes here including absolute posiioned elements
 </div>
</section>

在我的情况下，当您在同一元素上具有相对位置和固定背景附件时，问题似乎会发生。

希望这可以帮助到您。

- imdpk

Answer 10

将transform属性添加到具有固定背景图像的元素中。您可以设置任何位置。

#thediv {
    width: 100%;
    height: 600px;
    position: relative;
    display: block;
    background-image: url(https://cdn.shopify.com/s/files/1/1231/8576/files/hockeyjacket1.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    border: 10px solid black;
    transform: translate3d(0,0,0);
    -webkit-transform: translate3d(0,0,0);
}

https://jsfiddle.net/rkwpxh0n/2/

- Digggid