4

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.

Bryce
  • 6,440
  • 8
  • 40
  • 64
  • I think it might just be the speed of rendering the animation. It looks fine on Chrome and Safari on my end. – mauris Jan 03 '12 at 02:15
  • Looks fine to me in Chrome 17.0.963.12 and Safari 5.1.1 on OS X. Can you update your question with the browser and OS version? You might want to consider putting some sample code directly into your question. You'll get more people to look at it. – ThinkingStiff Jan 03 '12 at 02:25
  • Also, I learned something new from your question. I didn't realize you could use `transform` on a `static` element. – ThinkingStiff Jan 03 '12 at 02:29
  • Be sure to look at the lorum ipsum text, rather than the moving object. It's the body text that is messing up. – Bryce Jan 03 '12 at 04:53
  • Ok, I reproduced it and my solution still fixes it. I updated the demo link. `transition` is hardware accelerated by itself. Try it. – ThinkingStiff Jan 03 '12 at 06:02

1 Answers1

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>
ThinkingStiff
  • 64,767
  • 30
  • 146
  • 239