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

时间:2017-04-21 21:36:09

标签: css css3 firefox css-transforms background-attachment

目标:在已在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中没有正确修复背景。

1 个答案:

答案 0 :(得分: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-0data-10000属性添加到元素中,然后使用skrollr.init();初始化库即可。

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