Safari 不尊重位置：在返回选项卡时固定在 iFrame 中

问题描述

在 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 并将顶部设置为 window.scrollY。但是，我真的很想知道为什么 position:fixed 在 Safari 中的选项卡重新激活期间中断。

非常感谢任何指导。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）