使用转换功能时，Chrome会用文本截断div答案

【问题标题】：Chrome truncate div with text when use transform function使用转换功能时，Chrome会用文本截断div
【发布时间】：2022-02-12 07:23:54
【问题描述】：

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

我做了网上的例子，当你点击文本“点击这里”等待并再次点击，当文本回到起始位置时你可以看到这个文本闪烁。

很难解释，但我做了视频。我知道当滚动条变小时，这个错误已修复，但我需要找到解决这个问题的方法，用长网站（一页网站）

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

Chrome 上的视频（错误）

关于 Safari 的视频（很好）

【问题讨论】：

【解决方案1】：

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

对于这样的场景，使用will-change 向浏览器提示可能需要重新绘制/重新合成的内容：

.test {
  transition: transform 1.5s;

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

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

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

【讨论】：