Chrome truncate div with text when use transform function-CodePudding

Possible that I found a Chrome bug, on Safari everything works fine.

I did online example, when you click text "Click here" waiting and click again, when text back to start position you can see blink on this text.

Hard to explain but I did video. I know when scrollbar is smaller this bug is fixed but I need found way to resolve this with long site (one page site)

Online example with possibly chrome bug:

Video on safari (fine)

CodePudding user response：

Chances are, Chrome is trying to be "smart" and avoid rendering text that will lie outside the bounds when transformed. However that has the counterproductive effect of unnecessarily clipping the text.

For scenarios like this, use the will-change to hint the browser at what potentially will need to be repainted/recomposited:

.test {
  transition: transform 1.5s;

  /* Hint browser that transform property will be changed */
  will-change: transform;
}

This resolves the issue on Chrome. Do note that you should treat will-change as an emergency escape hatch for quirky rendering bugs that could benefit from browser optimising the rendering process beforehand. Do not apply it willy-nilly to a large subset of elements, as that significantly degrades performances of the browser.

You can also force the browser to composite the layer with a different (read: dated) strategy, by simply applying transform: translate3d(0,0,0); to the root state. This probably only useful if you also want to support browsers that do not have will-change support, but has CSS 3D transform support.

.test {
  transition: transform 1.5s;

  /* NOT RECOMMENDED: Force browser to move element to composition layer */
  transform: translate3d(0,0,0);
}