CSS translate（0,5px）正在X軸上晃動

我有懸停時發生的css翻譯。它隻影響Y軸，但它正在跳躍。這使懸停效果看起來不可思議。CSS translate（0,5px）正在X軸上晃動

-webkit-transform: translate(0,5px);

效果在主導航上。你可以在這裏看到：http://pineriver.com

這是關係到舍入或文本像素貼緊？如果是這樣，我不喜歡它:) 你可以看到我已經嘗試過的技巧，如opacity:.99。

我已經通過使用傳統的top:和bottom:做翻譯來解決這個問題，但我仍然很好奇爲什麼發生這種情況。我真的希望能夠使用CSS轉換來做這樣的視覺黃油事情。

2013-03-02 SimplGy

我認爲這是一個有趣的問題，但我會把所有的功勞給谷歌。

到nav.primary UL Li和.siteHeader .siteLogo規則補充一點：

-webkit-backface-visibility: hidden;

我發現這個想法here和here。

也here is some more reading from stackoverflow。他們在談論iPhone開發，但它仍然是webkit。

2013-03-02 05:13:11

這很奇怪。有什麼解釋爲什麼2D變換搞亂了3D的東西？ – 2013-03-02 05:25:04

哇。這就像是回到hasLayout的古老時代。一個看不見的開關。 http://www.satzansatz.de/cssd/onhavinglayout.html – SimplGy 2013-03-02 05:25:05

哦，順便說一下，Firefox有類似的擺動。 – SimplGy 2013-03-02 05:27:47

回答