Why does this repaint/reflow hack work?

Question

Sometimes we have to force repaint/reflow for the browser to render certain states. For instance:

window.onload = function () {
  setTimeout(function(){
    document.getElementById("gradient_text").innerHTML = "bar";
  }, 500);
}

#gradient_div {
  background: linear-gradient(#000000,#ffffff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

<div id="gradient_div">
  <p id="gradient_text" onload="update">
    Foo
  </p>
</div>

The "gradient_text" element, refuses to visually update its text to "bar". In some cases, it's enough to trigger a synchronous repaint like so:

...
setTimeout(function(){
  var elem = document.getElementById("gradient_text");
  // sync force repaint hack
  elem.innerHTML="bar";
  elem.style.display = 'none';
  elem.style.display = 'block';
}, 500);
...

However, this does not work. Apparently, it requires an asynchronous hack:

window.onload = function () {
  setTimeout(function(){
    var elem = document.getElementById("gradient_text");
    elem.innerHTML = "bar";
    // async force repaint hack
    var display = elem.style.display;
    elem.style.display = 'none';
    setTimeout(function(){
      elem.style.display = display
    }, 50);
  }, 500);
}

#gradient_div {
  background: linear-gradient(#000000,#ffffff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

<div id="gradient_div">
  <p id="gradient_text" onload="update">
    Foo
  </p>
</div>

What's causing the browser engine to behave this way? Mostly interested in Webkit/Blink.

I don't get what you are asking. In your first example the text **is** changing to 'bar'. — Michelangelo, Jun 28 '16 at 21:36
@GCyrillus Based on some local tests here, it doesn't make a difference. — m-a-r-c-e-l-i-n-o, Jun 28 '16 at 21:37
if you fire a script before html is loaded it has no effects cause it sees nothing yet , this is about my comment :) Your snippet shows that you call update onload, but your run something else that can start anytime the script is loaded :) — G-Cyrillus, Jun 28 '16 at 21:40
@GCyrillus I'll update it to run on window load, just to eliminate that possibility. — m-a-r-c-e-l-i-n-o, Jun 28 '16 at 21:43
@Mikey This leads me to think that maybe this was a bug, since you're not seeing it happen on v51 (latest). — m-a-r-c-e-l-i-n-o, Jun 28 '16 at 21:53
@m-a-r-c-e-l-i-n-o Yes, could be. Although this would be a huge bug introduced by the Google team. Can't imagine something that is so basic in the engine would be touched at all. But hey, I am just a simple programmer...what do I know ;) — Michelangelo, Jun 28 '16 at 22:07

score 0 · Answer 1 · answered Jun 28 '16 at 21:45

0

From my comment, should make it easy to test from any browser :

I added some mix-blend-mode effect so Firefox should render something similar to what Chrome is suppose to here .

window.onload = document.getElementById("gradient_text").innerHTML = "bar";

/*#gradient_div {
  background: linear-gradient(#000000,#ffffff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
*/
/* UPDATE to show similar text-fill effect in Firefox */
#gradient_div {
  background: linear-gradient(#000000,#ffffff);
}
#gradient_text {
  background:white;
  mix-blend-mode:screen
}

<div id="gradient_div">
  <p id="gradient_text">
    Foo
   </p>
</div>

answered Jun 28 '16 at 21:45

G-Cyrillus

101,410
14
105
129

Right, but you would have to make the `innerHTML` expression async for the problem to arise. With the way you posted, it has no issues, but try doing a `setTimeout` on it and you'll see that the problem is evident. – m-a-r-c-e-l-i-n-o Jun 28 '16 at 21:50
@m-a-r-c-e-l-i-n-o , does your probleme happens with that little of code or within a real page full of content ? i was unable to see this happen in my Chrome (Windows) – G-Cyrillus Jun 28 '16 at 21:52
What version of Chrome are you running? – m-a-r-c-e-l-i-n-o Jun 28 '16 at 21:54
@m-a-r-c-e-l-i-n-o Version 51.0.2704.103 m which is almost last one ... – G-Cyrillus Jun 28 '16 at 21:54
Same version @Mikey (from the comments) is running. I'm running v47, this leads me to think that maybe this was a bug, and no longer present. – m-a-r-c-e-l-i-n-o Jun 28 '16 at 21:56
Looks like it also to me, did you look for bug reports ? unless a browser updates does it to solve your issue :) – G-Cyrillus Jun 28 '16 at 22:01
@m-a-r-c-e-l-i-n-o https://bugs.chromium.org/p/chromium/issues/list?can=1&q=innerHtml&colspec=ID+Pri+M+Stars+ReleaseBlock+Component+Status+Owner+Summary+OS+Modified&x=m&y=releaseblock&cells=ids – G-Cyrillus Jun 28 '16 at 22:04
@GCyrillus Yeah, that's a lot of issues to go through ;) – Michelangelo Jun 28 '16 at 22:14
GCyrillus @Mikey Not going to pursue this further since it seems like it's a solved issue, but [maybe one day we'll know](https://bugs.chromium.org/p/chromium/issues/detail?id=624162&can=1&q=innerHtml&colspec=ID%20Pri%20M%20Stars%20ReleaseBlock%20Component%20Status%20Owner%20Summary%20OS%20Modified#). – m-a-r-c-e-l-i-n-o Jun 28 '16 at 22:37
@m-a-r-c-e-l-i-n-o Yes, maybe we will, but why do you stay on an outdated version of Chrome. I mean, they are meant to be evergreen ;) – Michelangelo Jun 28 '16 at 22:40
1

@Mikey Not sure, I don't actively manage that, my OS is slacking I guess? At any rate, there's been an update on the Chrome bug and it appears that the issue is present on the latest beta (52, 53), from their tests. I think we're on to something here. – m-a-r-c-e-l-i-n-o Jun 29 '16 at 09:57

Why does this repaint/reflow hack work?

1 Answers1

Linked