使用 -webkit-transform 时固定位置不起作用

Question

我正在使用 -webkit-transform（和 -moz-transform / -o-transform）来旋转一个 div。还添加了固定位置，以便 div 随用户向下滚动。

在 Firefox 中它工作正常，但在基于 webkit 的浏览器中它被破坏了。使用-webkit-transform后，固定的位置不再起作用了！这怎么可能？

原文由 iSenne 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

经过研究， Chromium 网站上有关于此问题的 错误报告，目前 Webkit 浏览器无法同时渲染这两种效果。

我建议在您的样式表中添加一些仅限 Webkit 的 CSS，并将转换后的 div 制作为图像并将其用作背景。

 @media screen and (-webkit-min-device-pixel-ratio:0) {
  /* Webkit-specific CSS here (Chrome and Safari) */

  #transformed_div {
    /* styles here, background image etc */
  }
}

所以现在你必须用老式的方式来做，直到 Webkit 浏览器赶上 FF。

编辑：截至 2012 年 10 月 24 日，该错误尚未解决。

---

这似乎不是错误，而是规范的一个方面，因为这两种效果需要单独的坐标系和堆叠顺序。 正如这个答案中所解释的那样。

原文由 Kyle 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

CSS 转换规范 解释了这种行为。具有变换的元素充当固定位置后代的包含块，因此 position:fixed 在具有变换的元素下不再具有固定行为。

当应用于同一元素时，它们确实起作用；该元素将定位为固定的，然后进行转换。

原文由 smfr 发布，翻译遵循 CC BY-SA 3.0 许可协议