Hoa*_*ung 5 html javascript css iframe ipad
要清楚地看到问题.请查看以下YouTube视频.
当重定向iframe时,位置固定元素会跳转
或尝试在此站点(iPad)Naiise上的小部件
注意:视频中的网站与上面的网站不同,因为在修复问题之前,所有者不想再使用小部件.但是他们遇到了同样的问题.
还有一件事:父网站上的所有固定元素不仅会跳转到iFrame.它喜欢在iPad上,当重定向iFrame中的页面时,需要重新计算固定元素的位置.
这是我创建的一个简单代码来模拟问题.请从中创建一个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>
问题是由translate3d您应用的转换引起的iframe;
-webkit-transform: translate3d(0, 0, 0);
存在一个众所周知的问题,其中translate3d导致position:fixed元素的行为类似于position:absolute某些webkit浏览器,例如iOS上的那些,以及某些桌面版本的chrome.
这是一个演示了操作中的错误的演示:
html,
body {
width:100%;
height:100%;
margin:0;
padding:0;
transform: translate3d(0, 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, 0);样式使其在所有浏览器中都能正常工作.
由于变换创建了一个新的坐标系,导致该position:fixed元素粘贴到变换后的元素而不是视口,从而发生此错误.
在尝试平滑iOS上的过渡时,我自己遇到了这个错误,并在此处创建了一篇关于它的帖子.更多信息可在发现这个线索,我也挂在自己的岗位.
我所知道的唯一可靠解决办法是删除有问题的translate3d风格.如果有必要,例如为了诱使iOS启用硬件加速(这是我需要它),那么尝试将它应用于不同的元素,父母(body,html)或iframe持有者的孩子.我发现将它应用于一个完全不相关的元素给了我想要的结果.
在我链接的线程中还有几个特定于案例的解决方法和修复程序.其中一个可能会成功.
追踪是一个非常讨厌的错误.花了一些时间在我自己的页面上找到它.
祝你好运.
| 归档时间： |
|
| 查看次数： |
1261 次 |
| 最近记录： |