title: Chrome not refresh div size when innerHTML changed
body: <p>The question is,</p>
  
  <p>"How can you have CSS after style display correctly in Chrome when a div gets resized?"</p>
  
  <p>and,</p>
  
  <p>"Has anyone had any issues with Chrome recently with elements not displaying correctly after change an elments innerHTML from JavaScript?"</p>
  
  <p>or,</p>
  
  <p>"Does anyone know of any bugs logged in Chrome for CSS display issues on resize (with link)?"</p>
  
  <p>and,</p>
  
  <p>"Does anyone know of a good workaround to this issue?"</p>
  
  <p>I have a chat SDK that does bubble chat.</p>
  
  <p>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</p>
  
  <p>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...</p>
  
  <p>What bubble looks like when the text is updated,</p>
  
  <p><a href="https://i.stack.imgur.com/ih2Rj.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ih2Rj.jpg" alt="enter image description here"></a></p>
  
  <p>What it should look like,</p>
  
  <p><a href="https://i.stack.imgur.com/VYzih.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VYzih.jpg" alt="enter image description here"></a></p>
  
  <p>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)</p>
  
  <p>Anyone know a better way to fix this, or when this broke in Chrome and if they will ever fix it?</p>
  
  <pre><code>// 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);
  }
  </code></pre>
  
  <p>The css for the tail is,</p>
  
  <pre><code>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;}
  </code></pre>