Chrome не обновляет Div размера когда innerHTML изменен

Question

Вопрос заключается в том,

«Как вы можете иметь CSS после показа стиля правильно в Chrome, когда DIV получает изменено?»

и

«Кто-нибудь имел какие-либо проблемы с Chrome в последнее время с элементами, не будут правильно отображаться после того, как изменить innerHTML из элементов, входящих JavaScript?»

или

«Кто-нибудь знает о каких-либо ошибок, зарегистрированных в Chrome для вопросов отображения CSS на изменение размера (с ссылкой)?»

и

«Кто-нибудь знает хорошее решение этого вопроса?»

У меня есть чат-пакет SDK, который делает пузырь чата.

Недавно я заметил, что пузырьки небольшого хвоста отображаются неправильно, когда пузырь чата изменяется. Это происходит только на Chrome, Firefix, IE и т.д., хорошо

Похоже ошибка Chrome, и я уверен, что он имел обыкновение работать ... :( , но не знаю, как долго ошибка будет оставаться таким образом ...

Что пузырь выглядит, когда текст обновляется,

Что это должно выглядеть,

У меня есть хак, чтобы исправить это, изменив родительский Див отступы на что-то другое, то установка тайм-аут, чтобы изменить его обратно (работает только с прерыванием)

Кто-нибудь знает лучший способ, чтобы исправить это, или когда это сломалось в 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); 
} 

СМЧ за хвост,

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