Some rendering issues with jQuery's .animate()
<p>I have some CSS that renders correctly normally when it's not being animated but doesn't render correctly when animated. Some clipping that should occur does not during the animation but snaps back as soon as it finishes.</p>

<p><img src="http://i.stack.imgur.com/cD8Rp.png" alt="enter image description here"></p>

<p>The last frame is what it looks like after it animates.</p>

<p>It only happens when I select the elements by class (i.e. <code>$('[class="chatbubble"] :first')</code>).</p>

<p>If I attach an id to the div and select it via <code>$('#id')</code>, it animates perfectly.</p>

<p>Here is my animation code:</p>

<pre><code>function animate() {
    var dom = $('[class="chatbubble"] :first');
    var chatmessage = dom.find('[class="chatmessage"]');
    var speed = 1500;
    soundManager.play('bloop');
    var wd = dom.width();
    var ht = dom.height();
    var fs = chatmessage.css('fontSize');

    dom.css('width',0); 
    dom.css('marginTop',parseInt(ht/9)); 
    dom.animate({ width:wd, marginTop:0 },speed).css('overflow', 'visible');

    chatmessage.css('font-size',0);
    chatmessage.animate({ fontSize:fs },speed).css('overflow', 'visible');
}
</code></pre>

<p>I'm not very familiar with jQuery so I don't know what could be causing it.</p>

<p>Can anyone help?</p>
