Chrome使用css轉換時閃爍黑屏旋轉

轉換旋轉會導致chrome閃爍黑屏。它是一個Chrome錯誤（在Safari中正常工作），或者可以用一些聰明的CSS修復它。Chrome使用css轉換時閃爍黑屏旋轉

div { 
 
    width:200px; 
 
    height:200px; 
 
    position:relative; 
 
    background:#ddd; 
 
} 
 

 
span { 
 
    display:inline-block; 
 
    position:absolute; 
 
    top:40px; 
 
    left:40px; 
 
    width:20px; 
 
    background:#007; 
 
    height:10px; 
 
    -webkit-transition: all .5s; 
 
} 
 

 
div:hover > span { 
 
    -webkit-transform: rotate(180deg); 
 
}

<div> 
 
    <span></span> 
 
</div>

例fiddle here。

這個問題存在的問題是，它不會每次都發生，所以您必須多次懸停灰色正方形，並且應該看到屏幕以黑色閃爍。

在測試：
鉻16.0.912.75
鉻金絲雀18.0.1010.0

正常工作於：
的Safari 5.1.2（6534.52.7）

雪豹

所有測試

來源

2012-01-18 Litek

它不會在Chrome中發生的任何或Chrome Canary版在Windows 7 – thirtydot

確定。我發現這個鉻錯誤報告：http：//code.google.com/p/chromium/issues/detail？id = 87512 – Litek

同樣的問題在這裏：MACOS上的Chrome：16.0.912.77，當你使用scale – meo

您可以通過將-webkit-transform: translate3D(0, 0, 0)強制合成保留在變形元素的父元素上來解決此問題。

div { width:200px; height:200px; position:relative; background:#ddd; -webkit-transform: translate3D(0, 0, 0)} 
 
span { display:inline-block; position:absolute; top:40px; left:40px; width:20px; background:#007; height:10px; -webkit-transition: -webkit-transform .5s; } 
 
div:hover > span { -webkit-transform: rotate(180deg); }

<div> 
 
    <span></span> 
 
</div>

退房小提琴：http://jsfiddle.net/UHLFF/

來源

2012-02-07 19:07:29

這似乎是伎倆。謝謝！ +1僅適用於僅webkit（或chrome）的webkit解決方案。 – Litek

你能否透露一下你如何解決這個問題？很想知道！ – tonyhb

我有同樣的問題，並找到鉻bug票的解決方法。 –

Chrome使用css轉換時閃爍黑屏旋轉

回答

相關問題