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! 😉
