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

回答

相關問題