Css “什么意思？”；有一个内联变换，它会导致后续层假定重叠；？

我正试图找到一个移动网站出现性能问题的原因（基于React和Material UI）

该页面显示了相当复杂的内容（一个表单），但是没有改变（关于这个问题）。表单本身有

位置：固定的
，精确的坐标，甚至
变换：translateZ（0）

在内容顶部的视觉上，有一个48x48像素的100%圆形
（一个自定义FAB=浮动操作按钮），在过渡期间（完成后覆盖整个屏幕）可放大到25倍

FAB基本上是整个页面的覆盖。它是表单树之外的元素

当我通过删除复杂的表单来简化页面时，即使在低端硬件上，FAB也能顺利地动画（多亏了GPU）

然而，随着形式的改变，性能显著降低

我看不出有什么原因，我希望这个形状会得到它自己的图层，并且只渲染（“绘制”）一次

当查看chromedevtools时间线时，仅选中了
Paint
选项，我看到很多表单元素（如简单的标签）在动画期间被重新绘制

请参见下图，了解Chrome给出的原因：


我真的不明白那是什么意思。为什么选择Chrome重新绘制这些元素

更新1
我在这里重现了这个问题：

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


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

请注意，如果浏览器窗口是否在HiDPI（4K）屏幕上，显然会产生不同。在1050p屏幕上进行相同的测试：


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

无论如何添加
display:none
到抽屉层可以使渲染性能良好（但显然不是解决方案）。
可以显示一些源代码吗？没有它，问题就不完整。它甚至没有提到晶圆厂是否有位置：绝对的还是没有。我知道你的意思。问题是，这是一个复杂的web应用程序（我无法向您展示）。但它的表现似乎有所不同。这就是为什么我尝试使用时间线来寻找原因，但毕竟我的问题是，合成原因实际上意味着什么？无论如何，我很乐意解释细节。FAB（目前仅为四舍五入，与测试用例类似）具有
位置：绝对
，yes@MrLister请在问题中查看我的更新