大佬教程收集整理的这篇文章主要介绍了javascript – 加载或重定向iframe时定位固定元素跳转(仅限iPad)，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
或尝试本网站上的小部件(iPad)
Naiise
这是我创建的一个简单代码来模拟问题.请从中创建一个html文件并在iPad模拟器或真实设备上运行以查看问题.
<html>
<body style="height: 10000px">
<div style="color: #ffffff; width: 200px; height: 100px; BACkground: red; position: fixed; left: 20px; bottom:300px;">
Other fixed element
</div>
<iframe style="height: 500px; width: 420px; position: fixed; bottom: 95px; right: 20px;" src="https://printskitchen.eber.co" />
</body>
</html>
-webkit-transform: translate3d(0,0);
有一个众所周知的问题,其中translate3d导致位置：固定元素的行为类似于某些webkit浏览器中的位置：绝对,例如iOS上的那些,以及某些桌面版本的chrome.
html,body { width:100%; height:100%; margin:0; padding:0; transform: translate3d(0,0); } #nav{ width:100%; height:10%; position:fixed; top:0; left:0; BACkground-color:red; } #content { width:100%; height:500%; }
<!DOCTYPE html> <html> <body> <nav id="nav"> </nav> <main id="content"> </main> </body> </html>
在演示中,即使向下滚动,红色导航也应该可见.根据您的浏览器,这可能会或可能不会正常工作.删除有问题的-webkit-transform：translate3d(0,0);样式使其在所有浏览器中都能正常工作.
由于变换创建了一个新的坐标系统,导致position：fixed元素粘贴到变换后的元素而不是视口,因此会发生此错误.
我在尝试平滑iOS上的转换时遇到了这个错误,并创建了一个关于它的帖子here.更多信息可以在this帖子中找到,我也在我自己的帖子中链接到了.
我所知道的唯一可靠解决方法是删除有问题的translate3d样式.如果有必要,例如为了诱使iOS启用硬件加速(这是我需要它),那么尝试将它应用于不同的元素,父母(body,html)或iframe持有者的孩子.我发现将它应用于一个完全不相关的元素给了我想要的结果.
在我链接的线程中还有几个特定于案例的解决方法和修复程序.其中一个可能会成功.
追踪是一个非常讨厌的错误.花了一些时间在我自己的页面上找到它.
祝你好运.
以上是大佬教程为你收集整理的javascript – 加载或重定向iframe时定位固定元素跳转(仅限iPad)全部内容，希望文章能够帮你解决javascript – 加载或重定向iframe时定位固定元素跳转(仅限iPad)所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。