CSS位置：相對和-webkit轉換創建文本重量毛刺

當一個CSS動畫被觸發，並且一個對象被定位爲除static（relative,absolute等）以外的任何東西時，對象中的文本突然變得非常在動畫期間很薄。然後它恢復到全寬度。CSS位置：相對和-webkit轉換創建文本重量毛刺

嘗試在Safari上運行此頁：http://pastehtml.com/view/bjgaloxjj.html（更新澄清）

注意，當#content DIV也不是絕對或相對定位的問題就會消失。這是用於iPad的Web應用程序，在設備上比在桌面上更明顯。

任何想法是什麼導致這種干擾？

編輯澄清：webkit-transform和webkit-transition必須使用，因爲他們正在硬件加速，這會導致更流暢的動畫。

來源

2012-01-03 Bryce

我想可能菊st是渲染動畫的速度。 Chrome和Safari在我看來很好。 – mauris 2012-01-03 02:15:48

在OS X上，Chrome 17.0.963.12和Safari 5.1.1中的我看起來不錯。您是否可以使用瀏覽器和操作系統版本更新您的問題？您可能想考慮將一些示例代碼直接放入您的問題中。你會讓更多的人看到它。 – ThinkingStiff 2012-01-03 02:25:54

另外，我從你的問題中學到了一些新東西。我沒有意識到你可以在'static'元素上使用'transform'。 – ThinkingStiff 2012-01-03 02:29:30

我能夠重現您的問題，並解決了這個問題。你不需要transform來實現你正在尋找的結果，只需要一個transition。 transition本身是硬件加速的。

從http://www.html5rocks.com/en/tutorials/speed/html5/#toc-hardware-accell：

CSS過渡做出風格的動畫平凡的每一個人，但他們也是一個聰明的性能特點。由於瀏覽器管理的CSS轉換爲，其動畫的保真度可以大大提高，並且在很多情況下硬件加速。

演示：http://jsfiddle.net/ThinkingStiff/bqSJX/

腳本：

function doMove() { 
    document.getElementById('mover').style.left = '150px'; 

    window.setTimeout(function() { 
     document.getElementById('mover').style.left = '50px'; 
    }, 1000); 

} 

window.setInterval(function() { doMove(); }, 3000);

CSS：

#content { 
    font-size: 150%; 
    position: relative; 
} 

#mover { 
    font-size: 200%; 
    left: 50px; 
    position: absolute; 
    top: 250px; 
    transition: left 1.1s ease-in-out; 
}

HTML：

<div id="content">A large cake with seventeen BURNING candles is in the 
    center of the table. It says "HAPPY 16TH BIRTHDAY" and 
    "GOOD LUCK, WESLEY." The whole BRIDGE CREW waits 
    around the table as Wesley ENTERS with Beverly. He's 
    touched, embarrassed and -- wants to get out of there.</div> 
<div id="mover">SOMETHING</div>

來源

2012-01-03 02:40:09 ThinkingStiff

小挑逗， - 在前綴爲**的前綴前綴前綴css屬性應該**。 – c69 2012-01-03 10:02:07

CSS位置：相對和-webkit轉換創建文本重量毛刺

回答

相關問題