当innerHTML改变时，Chrome不会刷新div大小

Question

问题是，

“当div调整大小后，如何在Chrome中正确显示样式后才能拥有CSS？”

和

“最近有没有人与Chrome有任何问题，从JavaScript更改elments innerHTML后元素无法正确显示？”

，或者

“有没有人知道Chrome浏览器中记录的任何错误调整大小（带链接）？”

和

“有没有人知道这个问题有一个好的解决方法？”

我有一个聊天SDK，可以进行泡泡聊天。

最近我注意到当聊天气泡调整大小时，气泡小尾巴无法正确显示。 它只发生在Chrome，Firefix，IE等上都可以

好像是一个Chrome错误，我确信它曾经工作...... :( 但不知道这个bug会以多长时间保持这种状态......

文本更新时的气泡是什么样的

应该是什么样的，

我有一个黑客来修复它，通过将父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);