爲什麼在文本結尾處使用帶文本的webkit轉換導致文本捕捉？

當你將鼠標移到股利，文字動畫中，但就在年底有一個很不起眼捕捉到的不透明度：1。爲什麼這麼突然？這怎麼能順利？謝謝

我什麼也沒看到這裏突然在Chrome作爲文本淡入是什麼瀏覽器，你看到它的？ – jfriend00

我使用的是Chrome瀏覽器21.0.1180.82，它真的很危險 – AnApprentice

我在Windows Vista上使用21.0.1180.83 - 我沒有看到任何跳動。 – jfriend00

在Chrome和FF Win 7/OS X上對我來說看起來很好，但在IE上當然沒有漸變的不透明度改變。對於所有瀏覽器，您可以嘗試使用jQuery實現相同的效果，並根據需要調整動畫速度。 http://jsfiddle.net/2Vdef/8/

2012-08-30 23:23:11

嘗試修改此：

-webkit-transition: opacity 1s ease; 
-moz-transition: opacity 1s ease; 
-o-transition: opacity 1s ease; 
transition: opacity 1s ease;

要這樣：

-webkit-transition: all 1s ease; 
-moz-transition: all 1s ease; 
-o-transition: all 1s ease; 
transition: all 1s ease;

它應該只是讓你所有的問題，過渡更平滑。

此外，@Slave上面的答案也是正確的，但將'200'更改爲'600'可使其更加平滑。答案是正確的，但我的答案是純粹的CSS。

2012-08-30 23:58:55 sgerbhctim

謝謝，我試過更新和字體重量的變化，但沒有'有效果... – AnApprentice

@一個學徒啊，夥計。抱歉對你沒有任何好處。 – sgerbhctim

這會產生一些不良的副作用，例如當頁面首次加載時，所有鏈接從默認的藍色/紫色淡出到自定義顏色。至少在Chrome 21中。 – luqmaan

原來可以防止choppyness有：

-webkit-transform: translateZ(0);

2012-08-31 00:40:58 AnApprentice

這個問題不是關於筷子的問題。沒有混亂。問題在於懸停轉換改變了文本的視覺重量，而不應該這樣做。 – luqmaan

答案依然幫助我。 :) –

我碰到了同樣的問題，而這種解決方案並不在我的情況下工作，它在你的一樣。

添加背面能見度。

-webkit-backface-visibility: hidden; 
-moz-backface-visibility: hidden; 
-ms-backface-visibility:  hidden; 
backface-visibility:   hidden;

編輯：在我的情況下，解決方案確實是backface-visbility。你只需要將它應用到正確的元素。我爲a設置了不透明度，並假設需要將backface-visbility應用於a。相反，它需要應用於容器a。

2012-09-03 15:49:53 luqmaan

回答