在插入上面的元素时保持滚动位置：仅在Safari中出现故障

Question

我有HTML页面，其中包含很多部分。这些部分的内容是懒洋洋地加载的。页面加载后，用户将滚动到某个特定部分。然后加载并插入该部分上方和下方的内容。显然，在上面插入内容会更改滚动位置，因此我需要保持相对于当前部分的滚动位置。

我已经实施了最简单的解决方案在Chrome，FF，Edge甚至IE11中完美运行，但在Safari中 - 它有毛刺。

以下是代码：

function insertElementAbove() {
  var elem;

  // load elem

  var prevOffset = window.pageYOffset;
  // insert element
  container.insertBefore(elem, container.firstChild);
  // measure inserter element height and adjust scroll pos
  var elemHeight = elem.offsetHeight;
  window.scrollTo(0, prevOffset + elemHeight);
}

我假设最后4行是同步运行的，所以根据浏览器渲染管道，不能在两者之间进行重绘：

但在Safari中似乎有时会在更改滚动之前进行绘画和合成。为什么Safari只有这样？可以因为Safari使用IOSurface框架（https://apple.stackexchange.com/a/56820）吗？有没有办法解决/解决这种行为？

以下是plunkr。

问题是在iframe模式下无法重现所以请转到“在单独窗口中预览”使用右上角的按钮：

• Safari：Version 10.0.1 (12602.2.14.0.7)
• macOS Sierra：Version 10.12.1