Firefox中的固定位置背景图像不适用于已转换的元素.这是一个FF错误吗？

Question

目标:在Firefox中运行的转换元素中创建固定的背景位置.

我已经在这个页面上尝试了所有解决方案(以及其他一些解决方案),但没有一个有效: 固定附件背景图像闪烁/在与css转换结合时消失在chrome中

我尝试过的东西是静态位置,背面可见性设置,z-index设置,其他背景附件.

演示:

.fixed1 {
   transform: translateZ(0);
}

如果你删除上面的转换,它的工作原理.但是,如果您正在使用Skrollr之类的东西,或者还有其他需要进行转换,那么在Firefox中没有正确修复背景.

Answer 1

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

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

规范background-attachment已调整为包含一条规则，即已转换元素中的元素将其background-attachment规则设置为scroll。

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

解决方法：

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

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

这样做的缺点是使用库来实现以前可以在干净的 CSS 中实现的功能，但它也具有积极的意义，因为视差背景比固定背景更容易吸引眼睛。