背景附着属性 fixed 在 Firefox 中与 transform 属性一起使用无法正常工作

Question

如何在Firefox中关闭CSS属性background-attachment: fixed，以下是示例：

div {
   transform: translate3d(0,0,0); // if remove starts to work
   width: 100%;
   height: 2000px;
   background-image: url('http://www.wallpapereast.com/static/images/001_Fish-Wallpaper-HD_hkNsK33.jpg');
   background-size: cover;
   background-attachment: fixed;
}

<div></div>

如果您从CSS中移除transform属性，则它将开始工作。仅在Firefox浏览器中复现。

- ReWWeR

---

我有同样的问题。有人知道解决方法吗？ - user5950

不确定为什么要设置赏金，这是一个已知的错误 https://bugzilla.mozilla.org/show_bug.cgi?id=1304985 - Temani Afif

在我的特定情况下，有一个swiper（react-id-swiper），这个swiper使用transform，在这个swiper中是完全相同的网站http://www.philanthropyage.org/coming-of-age-2018/。 - Abdul Rab Memon

任何帮助都将不胜感激 @TemaniAfif - Abdul Rab Memon

组合在任何浏览器中都不起作用。 - Jasper Habicht

Answer 1

当应用任何“transform”时，background-attachment:fixed;在火狐浏览器上无法工作，这是一个bug，并且尚未修复。

参考：https://bugzilla.mozilla.org/show_bug.cgi?id=1292499

- Viira

---

遗憾的是，该错误报告被视为无效，因为浏览器在变换期间故意将background-attachment: fixed处理为background-attachment: scroll。有没有办法替换background-attachment: fixed以使其在变换期间呈现正确的外观？ - Ray

Answer 2

两年前这是一个普遍的问题，但据我所知，一段时间以来已经解决了，现在CSS属性background-attachment已被所有浏览器完全支持，根据MDN。

- Elharony

---

尽管fixed目前还不被iOS Safari和三星Internet支持：Can I Use。 - Gust van de Wal

Answer 3

根据MDN文档，在动画方面，大多数背景属性都是离散的。除了background-size和background-position属性。

- Onyela Udochukwuka

---

虽然这个链接可能回答了问题，但最好在此处包含答案的基本部分并提供参考链接。如果链接页面更改，仅有链接的答案可能会失效。- 来自审查 - Aaron Meese

那是真的，我会注意的。 - Onyela Udochukwuka

在我看来，动画属性的离散性与这个问题无关。或者可能是我没有理解你的回答。 - Jasper Habicht

Answer 4

这个问题已经在这个问题中得到解决。

长话短说- 使用position而不是background-attachment。

- Libi

---

这个问题在那个问题中没有被解决，那个问题提供了另一个问题的解决方案。 - Abdul Rab Memon

@AbdulRabMemon 为什么要在已知的错误上添加赏金？ - Temani Afif