的Javascript文字渲染的更新（仅WebKit的）

我试图切换上点击文本错误。点击“暂停”后，将文本更改为“播放”。的Javascript文字渲染的更新（仅WebKit的）

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

这里的问题的视频：http://www.youtube.com/watch?v=tIRKx25NmYo

我使用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代码引用，并写在页面上，问题依然存在。我不知道什么是错，但它似乎不是碰撞或冲突。

已解决。（不允许以纪念这个回答，因为它太最近的。）

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

感谢所有的意见。希望这篇文章能帮助其他人解决同样的问题。

来源

2011-05-10 Zaqx

尝试在不同的位置 – Ibu 2011-05-10 07:40:11

您的跨度标签位置你有什么不同的位置呢？我只是将它从它所在的div中取出，并将它移动到body标签内的第一行。没有效果。 – Zaqx 2011-05-10 07:48:24

'pause（）'和'play（）'做了什么？ – 2011-05-10 08:04:10

的问题是与在 “playercontrols” 类中的造型。

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

我把它设置为相对位置，显然发送webkit的更新呈现出重击。

来源

2012-11-28 17:46:59 Zaqx

似乎闪烁文本（设置visibility到hidden，然后回到其原始值）修复该问题..

因此，这里是变通。

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/

来源

2011-05-10 09:53:47

非常浮华！哈哈无法抗拒。 ;）虽然这看起来像一个非常坚实的工作。我希望我能投票，但显然我需要15点声望。：/感谢您在这方面的时间！ – Zaqx 2011-05-10 10:56:55

的Javascript文字渲染的更新（仅WebKit的）

回答

相关问题