Question

When a CSS animation is triggered and an object is positioned with CSS to be anything other than static (relative, absolute, etc) the text inside the object suddenly goes very thin for the duration of the animation. It then reverts back to full width afterwards.

Try running this page in Safari: http://pastehtml.com/view/bjgaloxjj.html (updated for clarification)

Note that the problem disappears when the #content div is not positioned absolutely or relatively. This is for an iPad web app, and is more pronounced on the device than on a desktop.

Any ideas as to what’s causing this interference?

Edit for clarification: webkit-transform and webkit-transition must be used due to them being hardware accelerated, and this results in smoother animation.

Answer 1

I was able to reproduce your problem and this fixes it. You don’t need a transform to achieve the result you’re looking for, only a transition. transition by itself is hardware accelerated.

From 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.

Demo: http://jsfiddle.net/ThinkingStiff/bqSJX/

Script:

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>