Javascript Mobile Safari-iframe固定内容

Mobile Safari强制iFrame调整其内容大小

因此，当iframe中有固定div时，它不会固定。 是否有CSS属性强制iframe在手机中滚动并尊重固定内容

注意：固定内容在iframe中，而不是在容器中，因此div滚动无法解决此问题

<iframe src="page-with-fixed-content" style="width: 100%; height: 100%;">
    <!-- Fixed layer on the page loaded to iframe -->
    <div style="position: fixed; top:0;">
        Not Fixed on iPhone (Fixed on desktop)
    </div>
</iframe>

不适用于iPhone（适用于桌面）

---

如果iframe中有固定元素，则在查看内容时它将保持固定。 但是，媒体查询可能会更改CSS属性，从而使元素在移动版本中不再固定

你可以用导航条试试这个。在PC版中，导航栏是固定的，而在移动版中，导航栏不再是固定的

个人电脑版本：

手机版：

您能否向我们展示iframe中显示的网页代码？

您的iframe是否已修复

iframe{
   position:fixed;
   top:0;
   right:0;
   bottom:0;
   left:0;
   width:100%;
   height:100%;
   overflow:auto;
}

---

几个月前，我在开发一个webapp时遇到了这个挑战，在对quiet进行了一些研究之后，下面文章中建议的“shadowdom”方法有所帮助

---

查看此演示

随着iOS 5的发布，据说MobileSafari支持固定定位布局

支持这个词需要谨慎对待，因为我打算在下面的帖子中向大家展示各种各样的问题

请注意，在iOS 5的测试版期间，我已经为其中的一些问题提交了bug，但上帝知道苹果的雷达是如何工作的，所以我不知道问题的编号。 如何修复它？容易的。搜索堆栈溢出。这个问题以前曾被问过：

---

添加

转换：translate3d（0,0,0）到固定位置元素

div {
  position: fixed;
  transform: translate3d(0,0,0);
}

谢谢，但是你能看看iPhone浏览器上的代码笔示例吗？不是chrome inspect-它的行为不同。你是对的，我在IOS设备上也有同样的行为。你可以看看这个，但是它需要访问插入iframe中的页面。谢谢，是的，问题在于固定内容。关于这个参考，它是如何滚动包含div的iframe的。抱歉，仍然没有做到这一点-在iPhone Safari上看到这一点：+101看起来是一个很好的开始：）这是到目前为止唯一一个在mobile Safari上有效的答案，谢谢！此问题已在IOS Safari 13中修复。那里不需要解决办法。
div {
  position: fixed;
  transform: translate3d(0,0,0);
}