目标:在已在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中没有正确修复背景。
答案 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-0
和data-10000
属性添加到元素中,然后使用skrollr.init();
初始化库即可。
这有一个缺点,那就是使用库来处理以前在干净的CSS中可以实现的功能,但它确实具有积极意义,因为视差背景在眼睛上比固定背景容易得多。