Firefox中的固定位置背景图片不适用于转换后的元素.这是FF错误吗? [英] Fixed position background image in Firefox doesn't work with transformed element. Is this a FF bug?

问题描述

目标:在适用于Firefox的转换后的元素中创建固定的背景位置.

我已经尝试过此页面上的所有解决方案(以及其他一些解决方案)，但没有一个起作用:固定附件背景图像在chrome中闪烁/消失加上CSS转换

我尝试使用的是静态位置，背面可见性设置，z-index设置以及其他背景附件.

演示:

https://jsfiddle.net/96u9xqbn/6/

  .fixed1 {转换:translateZ(0);} 

如果删除上面的转换，它将起作用.但是，如果您使用的是Skrollr之类的工具，或者又需要进行转换，则背景无法在Firefox中正确固定.

解决方案

不幸的是，这不是bug，但范围发生了变化.

存在一个问题，即浏览器的行为与转换后的元素中的 background-attachment:fixed; 不一致，从而导致3D转换产生其他不一致之处.

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

Firefox 和Edge均符合新规范 Chrome 到目前为止尚未将更改部署在他们这边(在发布时，他们的bugtracker会显示11月30日为结束日期)

---

解决方法:

解决此规格更改的最快，最简单的方法是使用视差库为您解决这个问题.相当受欢迎的一种叫做Skrollr，并且我已经对您的小提琴进行了调整，包括了它..

基本上，您只需将 data-0 和 data-10000 属性添加到元素，然后使用 skrollr.init();

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

The Goal: to create a fixed background position in a transformed element that works in Firefox.

I have tried all solutions on this page (and a handful of others), but none have worked: Fixed attachment background image flicker/disappear in chrome when coupled with a css transform

Things I have tried using are static positions, backface visibility setting, z-index setting, other background-attachment stuff.

Demo:

https://jsfiddle.net/96u9xqbn/6/

.fixed1 {
   transform: translateZ(0);
}

If you remove the transform above, it works. But, If you're using something like Skrollr, or have another need for the transform, then the background is not properly fixed in firefox.

解决方案

Unfortunately this is not bug, but a change of scope.

There was a problem where browsers were inconsistent in their behaviour with background-attachment:fixed; inside transformed elements, which was causing additional inconsistencies with 3D transforms.

The spec for background-attachment was adjusted to include a rule that elements within transformed elements would have their background-attachment rules set to scroll.

Firefox and Edge have both conformed to the new spec, Chrome has so far not deployed the change on their side (at the time of posting this, their bugtracker shows 30 Nov as their end date)

---

Workaround:

The quickest and easiest way to work around this change of spec would be to use a parallax library to hit this for you. A fairly popular one is called Skrollr, and I've adjusted your fiddle to include it.

Essentially you can just add data-0 and data-10000 attributes to your element, and then initialise the library using skrollr.init();

This has the drawback of using a library for something that was previously achievable in clean CSS, but it does also carry positive weight in that a parallax background is much easier on the eyes than a fixed background.

这篇关于Firefox中的固定位置背景图片不适用于转换后的元素.这是FF错误吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！