html - CSS 位置 :relative and -webkit-transform creates text weight glitch

Question

当一个 CSS 动画被触发并且一个对象被 CSS 定位为除 static 之外的任何东西时(relative、absolute 等)在动画持续期间，对象内的文本突然变得非常细。然后它会恢复为全宽。

尝试在 Safari 中运行此页面:http://pastehtml.com/view/bjgaloxjj.html (为澄清而更新)

请注意，当 #content div 不是绝对定位或相对定位时，问题就会消失。这是针对 iPad 网络应用程序的，在设备上比在桌面上更明显。

关于造成这种干扰的原因有什么想法吗？

编辑澄清:webkit-transform 和 webkit-transition 必须使用，因为它们是硬件加速的，这会导致更流畅的动画。

Answer 1

我能够重现您的问题并修复了它。您不需要transform 来获得您正在寻找的结果，只需要一个transition。 transition 本身是硬件加速的。

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

CSS Transitions make style animation trivial for everyone, but they also are a smart performance feature. Because a CSS transition is managed by the browser, the fidelity of its animation can be greatly improved, and in many cases hardware accelerated.

演示: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>