解决方法：

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之类的东西，或者还有另外需要进行转换，那么在Firefox中没有正确修复背景。

Answer 1

很遗憾，这不是错误，but a change of scope。

存在一个问题，即浏览器的行为与转换后的元素中的background-attachment:fixed;不一致，这导致3D转换引起其他不一致。

对background-attachment的规范进行了调整，使其包含以下规则：转换后的元素中的元素的background-attachment规则应设置为scroll。

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

解决此规格更改的最快，最简单的方法是使用视差库为您解决这个问题。相当受欢迎的一种叫做Skrollr，还有I've adjusted your fiddle to include it。

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

这有一个缺点，那就是使用库来处理以前在干净的CSS中可以实现的功能，但它确实具有积极意义，因为视差背景在眼睛上比固定背景容易得多。