問(wèn)題描述

我正在使用 -webkit-transform(和 -moz-transform/-o-transform)來(lái)旋轉(zhuǎn) div.還添加了固定位置，以便 div 與用戶一起向下滾動(dòng).

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?

推薦答案

經(jīng)過(guò)一番研究，有一個(gè)Chromium 網(wǎng)站上關(guān)于此問(wèn)題的 20574" rel="noreferrer">錯(cuò)誤報(bào)告，到目前為止，Webkit 瀏覽器還不能同時(shí)渲染這兩種效果.

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，并將轉(zhuǎn)換后的 div 設(shè)為圖像并將其用作背景.

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 */
  }
}

所以現(xiàn)在你必須用老式的方式來(lái)做，直到 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 日，該錯(cuò)誤尚未解決.

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

這似乎不是一個(gè)錯(cuò)誤，而是規(guī)范的一個(gè)方面，因?yàn)檫@兩種效果需要單獨(dú)的坐標(biāo)系和堆疊順序.如本答案所述.

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.

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