我试图在移动网站上找到性能问题的原因（基于React和Material UI）。

页面显示相当复杂的内容（表单），但不会更改（就此问题而言）。表单本身有position: fixed，精确坐标甚至transform: translateZ(0)。

在内容的顶部，有一个48x48像素，100％舍入<div>（自定义FAB =浮动动作按钮），在转换过程中缩放到25倍（完成时覆盖整个屏幕）。 / p>

FAB基本上是整个页面的叠加层。它是表单树的外部元素。

当我通过删除复杂的表单来简化页面时，FAB即使在低端硬件上也能够流畅地动画（感谢GPU）。

但是，表单后，性能会显着下降。

我认为没有理由这样做，并且希望表单能够获得它自己的图层并且只渲染一次（＆＃34;绘制＆＃34;）一次。

在查看仅使用Paint选项的Chrome DevTools时间轴时，我发现动画期间会重新绘制很多表单元素（如简单标签）。

请参阅下面的图片，了解Chrome为此提供的原因：

我真的不明白这意味着什么。为什么选择Chrome重绘这些元素？

更新1

当存在MUI <Drawer>时会出现问题。即使它已关闭（使用transform: translate移出视口），它也会强制浏览器重新渲染：

如果抽屉在屏幕上可见，情况会更糟。

请注意，如果浏览器窗口位于HiDPI（4K）屏幕上，显然会有所不同。在1050p屏幕上进行相同测试：

在低分辨率屏幕上，圆圈显然是从48x48px光栅渲染放大（边缘变得非常模糊）。这在HiDPI屏幕上不会发生。

无论如何将display:none添加到Drawer图层会使渲染效果良好（但显然没有解决方案）。