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

2022-01-16 00:00:00 rotation html css positioning

我正在使用 -webkit-transform(和 -moz-transform/-o-transform)来旋转 div.还添加了固定位置，以便 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-transform 后，固定位置不再起作用！这怎么可能?

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?

推荐答案

经过一番研究，有一个Chromium 网站上关于此问题的 20574" rel="noreferrer">错误报告，到目前为止，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.

相关文章