更新时 Javascript 文本呈现错误（仅限 webkit）

Question

我正在尝试点击时切换文本。单击“暂停”时，将文本更改为“播放”。

由于某种原因，文本正在更新，但无法正确呈现。就好像 DOM 的那部分正在更新但没有刷新。由于某种原因，这只发生在 webkit 浏览器（Safari 5、Chrome 11）中。 Firefox 4 正在以应有的方式呈现它。

以下是有关该问题的视频：http://www.youtube.com/watch?v=tIRKx25NmYo< /a>

我在视频中使用 Cmd+A 选择文本，这似乎刷新了文本并使其正确显示。

这是代码：

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

编辑：我注释掉了页面上引用和编写的所有其他 javascript 片段，问题仍然存在。我不知道出了什么问题，但看起来并不是碰撞或冲突。

---

解决了。 （不允许标记此答案，因为它太新了。）

编辑：答案现在添加在下面。

感谢所有的评论。希望这篇文章能够帮助其他遇到同样问题的人。

Answer 1

似乎闪烁文本（将可见性设置为隐藏，然后返回其原始值）可以解决问题。

所以这是工作大约。

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);

演示 http://jsfiddle.net/gaby/SgwsZ/4/

Answer 2

问题出在“playercontrols”类的样式上。

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

我将它设置为相对位置，这显然使 webkit 的更新渲染变得不正常。