Sly*_*nal 19 javascript iframe mobile-safari ios10
在将焦点设置在iframe内的元素上时,iOS 10.1.1上的Safari似乎有一个错误.
当我们调用element.focus()iframe中的元素时,Safari将立即向下滚动父页面并将焦点元素移出屏幕(而不是将焦点元素滚动到视图中).
但是,只有当元素位于比设备屏幕高度更高的iframe时才会发生(更短的iframe可以).
因此,如果有两个元素,一个在iframe的顶部,另一个在页面的下方,第一个将精确聚焦,但第二个将在我们设置焦点时跳出屏幕.
对我来说,Safari似乎试图将元素滚动到视图中,但数学是错误的,它们最终滚动到页面下方的随机位置.在iOS9中一切正常,所以我认为这是iOS10中的一个新bug.
我已经整理了一个单页的要点,在iOS 10设备或模拟器上复制了这个问题.
这是您可以在手机上实际使用的URL:goo.gl/QYi7OE
这是一个plunker,所以你可以检查桌面行为:https://embed.plnkr.co/d61KtGlzbVtVYdZ4AMqb/
以及那个plunker的主要版本:https://gist.github.com/Coridyn/86b0c335a3e5bf72e88589953566b358
这是一个可以运行的gist版本(这里的缩短的URL点):https: //rawgit.com/Coridyn/86b0c335a3e5bf72e88589953566b358/raw/62a792bfec69b2c8fb02b3e99ff712abda8efecf/ios-iframe-bug.html
的index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<script>
document.addEventListener('DOMContentLoaded', function(){
document.querySelector('#frame').srcdoc = document.querySelector('#frameContent').innerHTML;
});
</script>
</head>
<body>
<iframe id="frame" frameborder="1"
style="width: 100%; height: 1200px;"
width="100%" height="1200">
</iframe>
<!--
To keep this a one-page example, the content below will be inserted into the iframe using the `srcdoc` attribute.
The problem occurs in iOS10 regardless of using `srcdoc` or `src` (and regardless of same-domain or cross-domain content).
-->
<script id="frameContent" type="text/template">
<div>
<style>
.spacer {
padding-top: 400px;
padding-bottom: 400px;
}
.green-block {
width: 20px;
height: 20px;
background-color: green;
}
.red-block {
width: 20px;
height: 20px;
background-color: red;
}
</style>
<div class="green-block" tabindex="0"></div>
<p>Scroll down and press the 'Focus Green' or 'Focus Red' button.</p>
<h2>'Focus Green'</h2>
<p><b>Expected:</b> should set focus on '.green-block' and scroll to the top of the page.</p>
<p><b>Actual:</b> sets focus but does not scroll page.</p>
<h2>'Focus Red'</h2>
<p><b>Expected:</b> should set focus on '.red-block' and not scroll page (because element is already on-screen).</p>
<p><b>Actual:</b> sets focus and scrolls down to the bottom of the host page.</p>
<hr/>
<p class="spacer">1 Filler content to force some visible scrolling 1</p>
<div class="red-block" tabindex="0"></div>
<div>
<button type="button" onclick="document.querySelector('.green-block').focus();">Focus Green</button>
<p>'Focus Green' should go to top of page, but on iOS10 the view doesn't move.</p>
</div>
<div>
<button type="button" onclick="document.querySelector('.red-block').focus();">Focus Red</button>
<p>'Focus Red' should stay here, but on iOS10 the view scrolls to the bottom of the page</p>
</div>
<p class="spacer">20 Filler content to force some visible scrolling 20</p>
<p>Bottom of iframe</p>
</div>
</script>
</body>
</html>
我们发现的事情:
INPUT元素正常工作window.onscroll = (event) => event.preventDefault();但这不起作用,因为该scroll事件不可取消scroll在父页面上引发的事件似乎来自Safari/Webkit本身,因为callstack中没有其他函数(当使用DevTools和Error.stack进行检查时)小智 2
我在 iOS 上滚动跳跃时遇到了类似的问题。我的所有 iOS 版本（8、9 和 10）都出现这种情况。
在真正的 iOS 10 设备中测试你的插件并没有给我带来问题。我不确定我测试是否正确。
你能在 iOS 上试试这个版本的 plunker 吗？https://embed.plnkr.co/NuTgqW/
我的问题的解决方法是确保 iframe 内容中的 body 和 html 标记具有定义的 100% 高度和宽度以及溢出滚动。这能够强制 iframe 的尺寸。它防止了滚动跳跃。
如果有帮助请告诉我。
| 归档时间： |
|
| 查看次数： |
4747 次 |
| 最近记录： |