-4

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,

enter image description here

What it should look like,

enter image description here

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;}
James
  • 17,965
  • 11
  • 91
  • 146
  • You can file a bug report, but it should be clear to you your question can't be answered (not here, not anywhere). – Amit Oct 04 '16 at 20:36
  • 1
    no, it is not clear? why can't this be answered? I'm sure someone has hit the same issue? – James Oct 04 '16 at 21:12
  • OK, let me be more accurate than: "*if they will ever fix it?*" can't be answered. Also if you're looking for workarounds, you need to post a MCVE to begin with, which you haven't done. – Amit Oct 04 '16 at 21:24
  • "if they will ever fix it" can be answered if someone knows of the bug id and it has a release set, or if they are a developer on Chrome, and know when it will be fixed – James Oct 05 '16 at 18:55
  • Could we see the markup for the bubble or a code snippet / jsfiddle that reproduces the bug? – ConnorsFan Oct 08 '16 at 14:29
  • the javascript code is kind of complex, and I have not been able to isolate a simple snippet the reproduces the issue yet – James Oct 10 '16 at 20:27
  • Maybe a jsfiddle for reproducing the error? – cytsunny Oct 11 '16 at 03:22
  • 1
    You can try reading the offsetHeight property of the bubble element. Some comments made in [How can I force WebKit to redraw/repaint to propagate style changes?](http://stackoverflow.com/a/3485654/1009922) suggest that simply accessing that property can refresh the display of the element. [Another answer](http://stackoverflow.com/a/5258893/1009922) from the same post says that adding an empty style element after the Javascript code solves repaint problems. – ConnorsFan Oct 11 '16 at 19:36
  • 1
    I don't know if you tried the various solutions proposed in the post I mention above, but here is [another one](http://stackoverflow.com/a/21947628/1009922): applying the class style `.willnotrender { transform: translateZ(0); }` on the element. – ConnorsFan Oct 13 '16 at 18:28
  • 1
    Another Chrome repaint problem was fixed in [this article](http://blog.getpostman.com/2015/01/23/ui-repaint-issue-on-chrome/) by setting the style attribute: `-webkit-transform: translate3d(0,0,0);`. – ConnorsFan Oct 13 '16 at 18:32
  • ok, I tried all of these, and no luck... at least I'm not alone, looks like loads of people hitting issue like this with Chrome since 2010... so not hopefully on a fix – James Oct 14 '16 at 20:08

2 Answers2

0
// 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.

kayleighsdaddy
  • 670
  • 5
  • 15
  • that is the same code as my current hack, the issue is it moves slight between the 10ms, and if there are images in the innerHTML that take time to load it does not fix the refresh issue as takes longer than 10ms – James Oct 13 '16 at 14:04
0

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);
Aruna
  • 448
  • 3
  • 12