Позиция 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/#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>