css - Firefox 中的固定位置背景图像不适用于转换后的元素。这是FF错误吗？

Question

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

我已经尝试了此页面上的所有解决方案（以及其他一些解决方案），但没有一个有效：固定附件背景图像在 chrome 中闪烁/消失，当与 css 转换结合使用时

我尝试使用的东西是静态位置、背面可见性设置、z-index 设置、其他背景附件。

演示：

.fixed1 {
   transform: translateZ(0);
}

如果您删除上面的转换，它可以工作。但是，如果您使用的是 Skrollr 之类的东西，或者对转换有其他需求，那么背景在 Firefox 中没有正确固定。

score 3 · Accepted Answer

不幸的是，这不是错误，而是范围的变化。

存在浏览器与background-attachment:fixed;内部转换元素的行为不一致的问题，这导致与 3D 转换的额外不一致。

对规范进行了background-attachment调整，以包含一个规则，即转换后的元素中的元素将其background-attachment规则设置为scroll.

Firefox和 Edge 都符合新规范，Chrome迄今尚未部署更改（在发布此内容时，他们的 bugtracker 显示 11 月 30 日为结束日期）

解决方法：

解决此规范更改的最快和最简单的方法是使用视差库来为您解决这个问题。一个相当流行的叫做 Skrollr，我已经调整了你的小提琴以包含它。

本质上，您可以只向元素添加data-0和data-10000属性，然后使用初始化库skrollr.init();

这有一个缺点，即使用一个库来处理以前在干净的 CSS 中可以实现的东西，但它也具有积极的意义，因为视差背景比固定背景更容易在眼睛上看到。