Javascript text render error on update (webkit only)

I'm trying to toggle text on click. When 'Pause' is clicked change the text to 'Play'.

For some reason the text is updating but not rendering correctly. It's as if that part of the DOM is being updated but not refreshed. For some reason this is only happening in the webkit browsers (Safari 5, Chrome 11). Firefox 4 is rendering it the way it should.

Here's a video of the problem: http://www.youtube.com/watch?v=tIRKx25NmYo

I'm using Cmd+A in the video to select the text, which appears to refresh the text and get it to display properly.

开发者_开发问答

Here's the code:

<span class="playercontrols" id="playpause" onclick="toggle(this.id);" style="cursor:pointer;">Pause</span>


<script type="text/javascript">

function toggle(sender){

var t = document.getElementById(sender);
var txt = t.innerHTML;

switch(txt) 
    {
    case 'Pause':
        txt = 'Play';
        pause();
        break;
    case 'Play':
        txt = 'Pause';
        play();
        break;
    default:
        txt = 'Pause';
    }           
t.innerHTML = txt;

}

</script>

EDIT: I commented out every other piece of javascript referenced and written on the page and the problem is still there. I have no idea what's wrong but it doesn't appear to be a collision or conflict.

---

SOLVED IT. (Not allowed to mark this answered because it's too recent.)

Edit: Answer now added below.

Thanks for all the comments. Hopefully this post will help others in the future with the same problem.

---

It seems that flashing the text (setting visibility to hidden and then back to its original value) fixes the issue..

So here is the work around.

t.innerHTML = txt;
/* add the following right after changing the text */
var visibility = t.style.visibility;
t.style.visibility = 'hidden';
setTimeout( function(){
    t.style.visibility = visibility;
}, 1);

demo http://jsfiddle.net/gaby/SgwsZ/4/

---

The problem was with the styling on the "playercontrols" class.

.playercontrols {
    position: relative;
    top: 80px;
    left: 50px;
}

I had it set to position relative which apparently sent webkit's update rendering out of whack.