Safari：执行复杂布局后的神秘框架

Question

在这种情况下，某些浏览器呈现详细信息的专家会遇到这种情况。这非常具体，所以我希望有人愿意花时间帮助我。

---

在完成一些复杂的布局例程后，我遇到了一种奇怪的情况，即在Webkit中渲染了一个神秘的框架。由于这在Chrome中不会发生，因此可能是Webkit的错误，但也许有人可以看到我是否做错了事。

下面是此应用程序的概要：

1. 有两个“层”（base和overlay）
2. 当我单击页面时，它们之间会有一个过渡。
3. 当我向下滚动一点时，在Safari中，就在过渡之前，基础层跳到了顶部，然后又返回：

但是，如果我绘制代码的时间表以及该错误发生的位置，则如下所示：

|-- L1 -- R -- L2 -- ❌ -- ✅ -- ...|

位置：

• L1：布局代码
• R：强制重排
• L2：布局代码
• ❌：框架不正确
• ✅：正确的框架

换句话说，不正确的框架是由浏览器渲染和纠正的，而不会干扰我的代码。但是，错误的框架是我在L1中执行的某些代码的 result （如果我删除了一些布局代码，该错误就会消失）。

我用代码https://jsfiddle.net/joostlubach/5eruf12k/创建了一个小提琴。但是，具有讽刺意味的是，该错误并未出现在此处，可能是因为jsfiddle将所有内容都包装在了一个容器中。

我还添加了ZIP file的源代码，以及Safari和Chrome的屏幕截图，以说明问题。