Chrome 使用转换函数时用文本截断 div

Question

可能是我发现了一个 Chrome 错误，在 Safari 上一切正常。

我做了在线示例，当您单击文本“单击此处”等待并再次单击时，当文本回到起始位置时您可以看到该文本闪烁。

很难解释，但我拍了视频。我知道当滚动条变小时这个错误被修复了但是我需要找到方法来解决这个长站点（一页站点）

可能存在 chrome 错误的在线示例：https://codesandbox.io/s/test3-800cu

chrome 上的视频（错误）

关于 safari 的视频（精细）

Answer 1

很有可能，Chrome 正试图变得“聪明”，避免呈现在转换时位于边界之外的文本。然而，这会产生不必要的裁剪文本的适得其反的效果。

对于这种情况，使用 will-change 提示浏览器可能需要的内容 repainted/recomposited:

.test {
  transition: transform 1.5s;

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

这解决了 Chrome 上的问题。请注意，您应该将 will-change 视为 紧急逃生口 以应对古怪的渲染错误，这些错误可能会受益于浏览器预先优化渲染过程。 不要将它willy-nilly应用于大量元素，因为这会显着降低浏览器的性能。

您还可以通过简单地将 transform: translate3d(0,0,0); 应用于根状态来强制浏览器使用不同的（阅读：过时的）策略来合成图层。这可能仅在您还想支持 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);
}

Chrome truncate div with text when use transform function