Input focus issue inside iframe

Hi!


I currently developing a mobile website and found that Safari on iOS has some problems setting the focus on inputs when they are inside an iframe.


When in a page you have many inputs you can tap on a field and then use the next / previous buttons on the keyboard to navigate between the fields. When the focus move to another input Safari scroll automatically the page centering the field in the page. This is great and works well.


The problem is when the fields are inside a page of an iframe. In this case when you change focus from one field to another Safari has some kind of issue; the page “bounce” and the focused field is not centered in the page.


I have made a video of a simple page that has this issue. In the first part of the video the page without the iframe is loaded and the focus works correctly. In the second part the page with the iframe is loaded and the issue is visible.

http://www.dale1.ch/documents/safari_iframe_focus_issue.mov


The code of the first page (testinput.html) where the focus is correctly handled is this:

<!DOCTYPE html>
<html>
<head>
    <title>Test input</title>
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
</head>
<body>
    <div><span>Input 1: </span><input type="text" tabindex="1" /></div>
    <div><span>Input 2: </span><input type="text" tabindex="2" /></div>
    <div><span>Input 3: </span><input type="text" tabindex="3" /></div>
    <div><span>Input 4: </span><input type="text" tabindex="4" /></div>
    <div><span>Input 5: </span><input type="text" tabindex="5" /></div>
    <div><span>Input 6: </span><input type="text" tabindex="6" /></div>
    <div><span>Input 7: </span><input type="text" tabindex="7" /></div>
    <div><span>Input 8: </span><input type="text" tabindex="8" /></div>
    <div><span>Input 9: </span><input type="text" tabindex="9" /></div>
    <div><span>Input 10: </span><input type="text" tabindex="10" /></div>
    <div><span>Input 11: </span><input type="text" tabindex="11" /></div>
    <div><span>Input 12: </span><input type="text" tabindex="12" /></div>
    <div><span>Input 13: </span><input type="text" tabindex="13" /></div>
    <div><span>Input 14: </span><input type="text" tabindex="14" /></div>
    <div><span>Input 15: </span><input type="text" tabindex="15" /></div>
    <div><span>Input 16: </span><input type="text" tabindex="16" /></div>
    <div><span>Input 17: </span><input type="text" tabindex="17" /></div>
    <div><span>Input 18: </span><input type="text" tabindex="18" /></div>
    <div><span>Input 19: </span><input type="text" tabindex="19" /></div>
    <div><span>Input 20: </span><input type="text" tabindex="20" /></div>
    <div><span>Input 21: </span><input type="text" tabindex="21" /></div>
    <div><span>Input 22: </span><input type="text" tabindex="22" /></div>
    <div><span>Input 23: </span><input type="text" tabindex="23" /></div>
    <div><span>Input 24: </span><input type="text" tabindex="24" /></div>
    <div><span>Input 25: </span><input type="text" tabindex="25" /></div>
    <div><span>Input 26: </span><input type="text" tabindex="26" /></div>
    <div><span>Input 27: </span><input type="text" tabindex="27" /></div>
    <div><span>Input 28: </span><input type="text" tabindex="28" /></div>
</body>
</html>


This is the code of the page that has the issue (testinput_iframe.html):

<!DOCTYPE html>
<html>
<head>
    <title>Test input</title>
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
</head>
<body>
    <iframe src="/testinput.html" />
</body>
</html>


The issue is present in Safari on the iPhone, iPad and the xCode Simulator from version 8.4 to version 9.2.

Someone know if this is a bug? There is way to fix it in css or javascript?


Thanks and sorry for my english! 😉

Replies

I'm having the exact same problem and have not been able to find a solution. Have you filed a bug report?

Yes, I have filled a bug report and was marked as a duplicate but I encourage you to fill another one (more is better).

DaleOne,


Would you please provide a link(s) to the bug report(s)?


Thanks,


TR

Unfortunally bug reports are private and only visible to the person who create it.


fbsFrontEndDev, I really suggest you to open a new report, the more the better.

Just want to inform that the bug is present also on iOS 10 beta 1. 😟


Alan

I have the same problem on iOS 10.2.1, and I filled a bug for such. But based on this stack overflow, it appears to affect any element with a tabIndex which is not an INPUT element. http://stackoverflow.com/questions/40487279/calling-element-focus-in-iframe-scrolls-parent-page-to-random-position-in-safa

I am also having the same issue. I have a name and email field inside a iframe. When i load the HTML page i see the page render properly. Now when i click and type the name field it works properly. Now when i click on email field and start to type the cursor moves down and outside the input box. This is really weird and exactly same problem as this one. Have anyone find the solution for this? Any help is highly appreciable.

Apple, if you are reading, please fix this - it's been a known issue for a long time, and other browsers do not have this problem.


I am trying to roll out a new product that uses iframes for some fields, but this bug is going to cost extra time becaue we have to work around this. I have not found a workaround yet.

Try to just add touch-action: none; to input styles