CSS3 Transform影響其他元素與鉻/ safari

我有一個問題，我的css3轉換是影響頁面上的其他元素，甚至導致他們排序閃爍。我看到另一篇文章，但他們沒有解決這個問題。CSS3 Transform影響其他元素與鉻/ safari

http://scosha.mybigcommerce.com/w107b/當您在導航上滾動時，會看到一個動畫css3轉換。它可以在Firefox中正常工作而不閃爍，但是使用Chrome和Safari瀏覽器的效果非常明顯，您可以在下拉菜單項以及頁腳文本中看到它。

2012-10-10 mfdeath

它的工作原理完全罰款 - 鉻24在Mac –

我已經在多臺Mac測試在Safari /鉻，效果竟是在Safari更糟。 – mfdeath

鏈接已死亡。但無論如何，我在我的電腦上使用chrome 24時也是如此。 – vsync

這是a known issue與Chrome瀏覽器22（和顯然Safari）上的Macintosh文本呈現。 GPU加速導致MacOS從亞像素切換到灰度抗鋸齒，這會使字體重量顯着下降。

更新：

如下的OP筆記，修復是應用-webkit-font-smoothing: antialiased - 這在任何時候都適用灰度抗鋸齒。如果你這樣做，你可能會想要增加你的字體權重，因爲灰度反鋸齒文本看起來比子像素要薄很多

你可以通過應用導致內容總是一致的屬性來獲得相同的效果GPU加速（例如背面可見性：隱藏），但是由於這些不能保證在未來的瀏覽器版本中導致GPU加速 - 未來可以更簡單地指定灰度。

2012-10-11 00:31:16

感謝兄弟發現了我正在尋找的東西。對於那些最終從谷歌搜索結果來的人： -webkit-font-smoothing：antialiased; 似乎解決了這個問題。 – mfdeath

值得注意的是，設置-webkit-font-smoothing：subpixel-antialiased;將實現同樣的事情，而不會導致類型顯得更薄。 –

或[不要使用'-webkit-font-smoothing：antialiased']（http://www.usabilitypost.com/2012/11/05/stop-fixing-font-smoothing/） –

-3

我在Chrome中遇到了同樣的問題，但不是Firefox。

臨時解決方法是增加一個web-kit修復和除去過渡：

-webkit-transition: none;

2012-10-13 01:48:31 Mike

工作液在Chrome過渡期間閃爍元件是設置CSS的父節點：

-webkit-backface-visibility: hidden;

2013-11-06 16:19:37 zajc

在我看來，這只是簡單地將字體渲染設置爲灰度抗鋸齒。 – enyo

這適用於我添加到閃爍元素（不是父項）時。 –

我的解決方案是將波紋管的CSS應用於所有受影響元素的父項。

-webkit-transform-style: preserve-3d; 
-webkit-transform:translate3d(0,0,0);

2015-01-09 15:27:01 Bema

它只適用於我-webkit-transform：translate3d（0,0,0）;'。 –

回答