Firefox 中的固定位置背景图像不适用于转换后的元素。这是一个 FF 错误吗?
Fixed position background image in Firefox doesn't work with transformed element. Is this a FF bug?
目标:在 Firefox 中工作的转换元素中创建固定背景位置。
我已经尝试了此页面上的所有解决方案(以及其他一些解决方案),但 none 有效:
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 中没有正确修复。
不幸的是,这不是错误,but a change of scope。
存在一个问题,即浏览器的行为与变换元素内的 background-attachment:fixed;
不一致,这会导致与 3D 变换的额外不一致。
background-attachment
的规范已调整为包含一条规则,即已转换元素中的元素会将其 background-attachment
规则设置为 scroll
。
Firefox and Edge have both conformed to the new spec, Chrome 到目前为止还没有在他们这边部署更改(在发布这篇文章时,他们的错误跟踪器显示 11 月 30 日是他们的结束日期)
解决方法:
解决此规范更改的最快和最简单的方法是使用视差库来为您解决这个问题。一个相当流行的叫做 Skrollr,I've adjusted your fiddle to include it.
基本上,您只需将 data-0
和 data-10000
属性添加到您的元素,然后使用 skrollr.init();
初始化库
这有一个缺点,即使用一个库来实现以前可以在干净的环境中实现的东西 CSS,但它也具有积极的意义,因为视差背景比固定背景更容易在眼睛上看到。
目标:在 Firefox 中工作的转换元素中创建固定背景位置。
我已经尝试了此页面上的所有解决方案(以及其他一些解决方案),但 none 有效: 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 中没有正确修复。
不幸的是,这不是错误,but a change of scope。
存在一个问题,即浏览器的行为与变换元素内的 background-attachment:fixed;
不一致,这会导致与 3D 变换的额外不一致。
background-attachment
的规范已调整为包含一条规则,即已转换元素中的元素会将其 background-attachment
规则设置为 scroll
。
Firefox and Edge have both conformed to the new spec, Chrome 到目前为止还没有在他们这边部署更改(在发布这篇文章时,他们的错误跟踪器显示 11 月 30 日是他们的结束日期)
解决方法:
解决此规范更改的最快和最简单的方法是使用视差库来为您解决这个问题。一个相当流行的叫做 Skrollr,I've adjusted your fiddle to include it.
基本上,您只需将 data-0
和 data-10000
属性添加到您的元素,然后使用 skrollr.init();
这有一个缺点,即使用一个库来实现以前可以在干净的环境中实现的东西 CSS,但它也具有积极的意义,因为视差背景比固定背景更容易在眼睛上看到。