溢出：隐藏在body上导致文档重绘Safari中另一个元素的中间转换

Question

我有一个布局，当单击一个元素时，它会展开并打开一个模态 对话。单击它后，position:fixed克隆将附加到具有相同位置属性的主体，以使其显示在与原始元素相同的位置。然后克隆展开以填充页面以充当对话框。

noscroll类被添加到正文

.noscroll {
    overflow: hidden;
    transform: none; 
    position: relative;
}

这就是问题开始发生的地方。当克隆元素处于转换其位置属性的过程中时，会发生文档重绘，导致转换冻结，然后在重绘结束时继续。

仅在Safari中出于某种原因才会发生这种情况。这是时间轴的屏幕截图 显示我的意思

当我没有添加noscroll课程时，这不会发生。这让我发疯，我已经尝试了一切，这种情况一直在发生。

Answer 1

我今天遇到了这个问题，解决方法是调整页面上的所有图片。

对我来说，巨大的绿色布局事件实际上不是布局或绘画而是复合。我理解这个阶段是浏览器实际将所有内容都绘制到屏幕上的时候。

这是（我认为），因为页面上的所有图像都太大了，无法显示它们的大小; ~14mb用于最多300px宽的图像。将我的所有图像调整为更合适的300x400完全摆脱了这个问题。有意义的是，隐藏和显示的一堆巨大图像对于浏览器来说真的很难绘制。仍然完全失去了为什么overflow: hidden和仅在Safari上触发此问题的原因。