Menu
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.
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:
INPUT elements works correctlywindow.onscroll = (event) => event.preventDefault(); but this doesn't work because the scroll event is not cancelable
scroll event 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)
969
var iframeID = document.getElementById ("modalIFrame"); //focus the IFRAME element $ (iframeID).focus (); //use JQuery to find the control in the IFRAME and set focus $ (iframeID).contents ().find ("#emailTxt").focus ();
window.parent.functionName(); In the page that is in the iframe you can call a JS function inside the parent page this way. You wrote, "I wanted once the all the transition is completed in the iframe it should focus to parent page to load the transaction acknowledgement page.
I discovered that FF triggers the focus event for iframe.contentWindow but not for iframe.contentWindow.document. Chrome for example can handle both cases. so, I just needed to bind my event handlers to iframe.contentWindow in order to get things working. Maybe this helps somebody ...
Very useful for high Iframes! When you use an Iframe and your visitor clicks on a link in this Iframe, the Parent page usually remains as it is. This is especially fine with small frames, but what if you have a large Iframe that actually needs to blend into the rest of your website?
I had a similar issue with scroll jumping around on iOS. It was happening on all iOS versions for me, 8, 9 and 10.
Testing your plunker in a real iOS 10 device didn't cause the problem for me. I am not sure if I tested correctly.
Can you try this version of your plunker on iOS? https://embed.plnkr.co/NuTgqW/
My workaround for my issue was to make sure the body and html tag in the iframe content had a defined 100% height and width, and an overflow scroll. This was able to force the iframe's dimension. It prevented the scroll jumping.
Let me know if it helps.
100
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
