問題描述

我正在使用 -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.

這篇關于使用 -webkit-transform 時固定位置不起作用的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！