固定位置在使用-webkit-transform时不起作用 [英] Positions fixed doesn't work when using -webkit-transform

问题描述

我使用-webkit-transform（和-moz-transform / -o-transform）旋转div。

I am using -webkit-transform (and -moz-transform / -o-transform) to rotate a div. Also have position fixed added so the div scrols down with the user.

在Firefox中它可以正常工作，但是在基于webkit的浏览器中它被破坏了。使用-webkit变换后，位置固定不工作了！

In Firefox it works fine, but in webkit based browsers it's broken. After using the -webkit-transform, the position fixed doesn't work anymore! How is that possible?

推荐答案

经过一番研究之后，有一个错误报告 nofollow noreferrer> Chromium 网站关于这个问题，到目前为止Webkit浏览器不能同时呈现这两个效果在一起。

After some research, there has been a bug report on the Chromium website about this issue, so far Webkit browsers can't render these two effects together at the same time.

我建议在你的样式表中添加一些Webkit的CSS，并将转换后的div作为背景使用。

I would suggest adding some Webkit only CSS into your stylesheet and making the transformed div an image and using it as the background.

@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。

So for now you'll have to do it the old fashioned way, until Webkit browsers catch up to FF.

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

As of 10/24/2012 the bug has not been resolved.

这似乎不是一个错误，而是规范的一个方面，由于两个效果需要单独的坐标系统和堆叠顺序。 如此答案中所述。

This appears to not be a bug, but an aspect of the specification due to the two effects requiring separate coordinate systems and stacking orders. As explained in this answer.

这篇关于固定位置在使用-webkit-transform时不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！