iframe - Safari 不尊重位置：返回选项卡时在 iFrame 中修复

Question

在 Safari（使用 14.1.1）中，而不是 Firefox 或 Chrome 中，只有在切换并返回页面后，div 的 position:fixed 元素的作用类似于 position:absolute。[编辑] 页面位于 iFrame 中。Safari 尊重位置：如果页面不是 iFramed（jsfiddle iFrames 呈现的 html），则在窗口重新聚焦时固定。

奇怪的是，Safari Inspector 在应该出现 fixed:position div 的位置显示了缺少的 fixed:position div 的边界框。

请参阅示例 jsfiddle。测试：打开 jsfiddle，另一个选项卡，然后返回 jsfiddle 以查看位置问题（在 Safari 中，在 Chrome 和 FF 中有效）

/* style */
#my-modal-container {
  min-height: 2400px;
  background-image: linear-gradient(red , yellow);
}

#my-modal {
  position: fixed;
  bottom: 13px;
  background-color: blue;
  height: 100px;
  overflow: hidden;
}

<!-- html -->
<div id="my-modal-container">
 <div id="my-modal">
   The paragraph in the modal div:
   <p>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
   </p>
 </div>
</div>

/* javascript to scroll to middle of container div */
window.scroll(0, 1000);

https://jsfiddle.net/khdolan/cqnkary6/

我能够将 div 捕捉回其固定位置的唯一方法是手动滚动 iFramed 父 div。查询边界框偏移量不会自动修复显示，就像在类似问题中一样。边界框值显示边界框的 div 应该在哪里，但 div 视觉部分实际上在滚动页面的上方（在一个位置：绝对区域）。

我发现了很多关于 Safari iOS iFrame position:fixed issues 的帖子，但是这个 position:fixed在首次加载时有效，至少在 PC 上有效。它只在弹开和返回时才会破裂。

我有一个 hacky 解决方案将 div 更改为 position:absolute 并将 top 设置为 window.scrollY。但是，我真的很想知道为什么在 Safari 中重新激活选项卡期间的位置：固定中断。

非常感谢任何指导。

标签： iframescrollsafaricss-positionbrowser-tab