當innerHTML更改時，Chrome不會刷新div大小

Question

問題是，

“當 div 調整大小時，如何在 Chrome 中正確顯示樣式后使用 CSS？”

和，

“最近有沒有人在 Chrome 中遇到任何問題，在從 JavaScript 更改元素 innerHTML 后元素無法正確顯示？”

或者，

“有沒有人知道 Chrome 中記錄的任何錯誤，用於調整大小（帶鏈接）時的 CSS 顯示問題？”

和，

“有人知道解決這個問題的好方法嗎？”

我有一個可以進行氣泡聊天的聊天 SDK。

最近我注意到聊天氣泡調整大小時，氣泡小尾巴沒有正確顯示。 它只發生在 Chrome、Firefix、IE 等上都可以

似乎是 Chrome 的錯誤，我確定它曾經可以工作...... :( 但不確定這個錯誤會保持多久......

文本更新時氣泡的樣子，

它應該是什么樣子，

我有一個 hack 來修復它，通過將父 div 填充更改為不同的東西，然后設置超時以將其更改回來（僅適用於超時）

任何人都知道解決這個問題的更好方法，或者當它在 Chrome 中崩潰時，他們是否會修復它？

// Fix Chrome bug,
if (SDK.isChrome()) {
    var padding = document.getElementById(this.prefix + 'response').parentNode.parentNode.style.padding;
    document.getElementById(this.prefix + 'response').parentNode.parentNode.style.padding = "7px";
    setTimeout(function() {
        document.getElementById(this.prefix + 'response').parentNode.parentNode.style.padding = padding;
    }, 10);
}

尾巴的 css 是，

bubble:before { content:''; position:absolute; bottom:0px; left:40px; border-width:20px 0 0 20px; border-style:solid; border-color:black transparent; display:block; width:0;}
bubble:after { content:''; position:absolute; bottom:3px; left:42px; border-width:18px 0 0 16px; border-style:solid; border-color:white transparent; display:block; width:0;}

Answer 1

// Fix Chrome bug,
if (SDK.isChrome()) {
    var padding = document.getElementById(this.prefix + 'response').parentNode.parentNode.style.padding;
    document.getElementById(this.prefix + 'response').parentNode.parentNode.style.padding = "7px";
    setTimeout(function() {
        document.getElementById(this.prefix + 'response').parentNode.parentNode.style.padding = padding;
    }, 10);
}

是唯一的解決辦法。

Answer 2

您可以通過設置帶有氣泡滾動高度的父高度來嘗試這樣的事情，如下所示，

// Fix Chrome bug,
function fixChromeBug(){
    if (SDK.isChrome()) {
        // this is your bubble element and change accordingly
        var bubble = document.getElementById('bubble');
        // Below should be an actual parent
        var parent = bubble.parentNode;
        // or this if required
        //var parent = bubble.parentNode.parentNode;
        parent.style.height = bubble.scrollHeight + parent.style.padding + 'px';
    }

}
    setTimeout(function() {
      fixChromeBug();
      document.getElementById('imageIfAny').onload = fixChromeBug;
   }, 1);