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

Question

The question is,

"How can you have CSS after style display correctly in Chrome when a div gets resized?"

and,

"Has anyone had any issues with Chrome recently with elements not displaying correctly after change an elments innerHTML from JavaScript?"

or,

"Does anyone know of any bugs logged in Chrome for CSS display issues on resize (with link)?"

and,

"Does anyone know of a good workaround to this issue?"

I have a chat SDK that does bubble chat.

Recently I have noticed that the bubbles little tail is not displayed correctly when the chat bubble resizes. It only occurs on Chrome, Firefix, IE, etc. are ok

Seems like a Chrome bug, and I'm sure it used to work ... :( but not sure how long the bug is going to stay this way...

What bubble looks like when the text is updated,

What it should look like,

I have a hack to fix it, by changing the parent div padding to something different, then setting a timeout to change it back (only works with a timeout)

Anyone know a better way to fix this, or when this broke in Chrome and if they will ever fix it?

// 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);
}

The css for the tail is,

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

is the only solution.

Answer 2

Can you try something like this by setting the parent height with bubble's scroll height as below,

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