在 Safari 上，当 DOM 在可见视口之外更新时，视口中的内容会发生变化

问题描述

在 Google Chrome 上将元素添加到用户视口上方的 DOM 时，视口中的内容不会移动，而在 Safari 上会移动（等于新元素的高度）。

在视口外进行更新后，Safari 上的内容怎么可能不会发生变化？

编辑 (2021-06-02)：我发现这种行为称为滚动锚定，可以在 https://github.com/WICG/ScrollAnchoring 和 https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-anchor/Guide_to_scroll_anchoring

上找到更多详细信息

---

在下面的演示视频中，一个项目被添加到列表的顶部（每 4 秒一次）。随着项目的添加（以蓝色突出显示），视口中的内容（使用可滚动区域模拟）向下移动，导致布局移动。

• 源代码：https://github.com/kevinfarrugia/poll-layout-instability
• 演示：https://kevinfarrugia.github.io/poll-layout-instability/

解决方法

最简单的解决方案可能是在对页面进行更改之前读取 window.scrollY，然后在插入新元素后将其设置回该值

const y = window.scrollY
updatePage()
window.scrollY = y