Позиция CSS: относительный и -webkit-transform создает глюк веса текста

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/:

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>