Safari on iOS 10.1.1 seems to have a bug when setting focus on an element inside an iframe.
When we call element.focus() on an element inside an iframe, Safari will immediately scroll the parent page down and move the focussed element off-screen (instead of scrolling the focussed element into view).
However, it only happens if the element is in an iframe that is taller than the device screen height (shorter iframes are OK).
So if there are two elements, one at the top of the iframe and another one further down the page, the first will focus fine but the second one will jump off-screen when we set focus.
To me it looks like Safari is trying to scroll the element into view but the maths is wrong and they end up scrolling to a random position further down the page. Everything works OK in iOS9 so I think this is a new bug in iOS10.
Is some way of preventing the parent page from scrolling or some other way of avoiding this bug?
I've put together a one-page gist that replicates the issue on iOS 10 devices or the Simulator.
Here is a a URL you can actually use on a phone: goo.gl/QYi7OE
Here's a plunker so you can check desktop behaviour: https://embed.plnkr.co/d61KtGlzbVtVYdZ4AMqb/
And a gist version of that plunker: https://gist.github.com/Coridyn/86b0c335a3e5bf72e88589953566b358
Here's a runnable version of the gist (the shortened URL above points here): 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>
Things we've found:
- The issue happens on iOS 10+ in both Safari and Chrome
- The issue does not happen on Safari iOS 9.3.2 (behaviour matches desktop browser, as expected)
- The problem only happens when focussing on non-input HTML elements e.g. DIVs, SPANs, anchor tags, etc; setting focus on
INPUTelements works correctly - Desktop Safari works fine
- It's the parent page that is scrolling, not the iframe (the iframe is sized to 100% of its content to avoid scrolling inside the frame)
- We've tried calling preventDefault on the parent page with:
window.onscroll = (event) => event.preventDefault();but this doesn't work because thescrollevent is not cancelable - The
scrollevent raised on the parent page seems to come from Safari/Webkit itself because there are no other functions in the callstack (when inspecting with DevTools and Error.stack)
