溢出：隐藏在身体原因文档重绘在Safari

Question

另一个元素我有一个布局被点击元素时，它扩展并打开一个模态对话框 中期过渡。当它被点击时，一个position:fixed克隆被附加到具有相同位置属性的主体，以便它出现在与原始元素相同的位置。克隆然后展开以填充页面以充当对话框。

一个noscroll类添加到身体

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

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

这只发生在Safari出于某种原因。这里的时间表 的截图来说明我的意思

当我不添加noscroll类，这种情况不会发生。这让我疯狂，我尝试了一切，而这种事情一直在发生。

Answer 1

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

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

这是（我认为），因为所有的页面上的图像是太大了，因为他们正在为显示的大小;对于宽度至多为300像素的图像，约为14mb。将我的所有图像调整为更合适的300x400可以完全消除此问题。这是有道理的，一堆巨大的图像被隐藏和显示，真的很难浏览器绘制。仍然完全丧失为什么这个问题是由overflow: hidden触发的，仅在Safari上。