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