火狐浏览器中的固定背景图像与已转换元素不兼容。这是火狐浏览器的错误吗？

Question

目标：创建在Firefox中有效的转换元素中的固定背景位置。

我已经尝试了这个页面上的所有解决方案（和其他一些），但都没有成功： Fixed attachment background image flicker/disappear in chrome when coupled with a css transform 我尝试使用静态位置、背面可见性设置、z-index设置和其他背景附着内容等方法。 演示： https://jsfiddle.net/96u9xqbn/6/

.fixed1 {
   transform: translateZ(0);
}

如果你移除上述的变换，那么它可以正常工作。但是，如果你正在使用像Skrollr这样的工具，或者有其他需要使用变换的情况下，该背景在火狐浏览器中无法正确地固定。

- Robert

Answer 1

不幸的是，这不是一个bug，而是一个范围的变化。

浏览器在转换元素内使用background-attachment:fixed;时表现不一致，这导致了与3D转换的额外不一致性。

background-attachment的规范被调整，以包括一个规则，即转换元素内的元素将其background-attachment规则设置为scroll。

Firefox和Edge都符合新规范，Chrome目前尚未在其端部署更改（在发布此文时，他们的错误跟踪器显示11月30日为结束日期）。

---

解决方法：

绕过这种规范变化的最快最简单的方法是使用视差库来为您解决这个问题。一个相当流行的库叫做Skrollr，我已经调整了你的fiddle以包含它。

基本上，您只需为元素添加data-0和data-10000属性，然后使用skrollr.init();初始化库即可。

这种方法的缺点是使用库来完成之前可以通过纯CSS实现的功能，但它也有积极的作用，因为视差背景比固定背景更容易让人眼睛舒适。

- Frits