<html>
<head>
<base href="https://bugs.webkit.org/" />
</head>
<body><table border="1" cellspacing="0" cellpadding="8">
<tr>
<th>Bug ID</th>
<td><a class="bz_bug_link
bz_status_NEW "
title="NEW - iOS - Clicking on a label far below the "for" input does not scroll to input but does open keyboard"
href="https://bugs.webkit.org/show_bug.cgi?id=155913">155913</a>
</td>
</tr>
<tr>
<th>Summary</th>
<td>iOS - Clicking on a label far below the "for" input does not scroll to input but does open keyboard
</td>
</tr>
<tr>
<th>Classification</th>
<td>Unclassified
</td>
</tr>
<tr>
<th>Product</th>
<td>WebKit
</td>
</tr>
<tr>
<th>Version</th>
<td>Safari 9
</td>
</tr>
<tr>
<th>Hardware</th>
<td>iOS
</td>
</tr>
<tr>
<th>OS</th>
<td>iOS 9.3
</td>
</tr>
<tr>
<th>Status</th>
<td>NEW
</td>
</tr>
<tr>
<th>Severity</th>
<td>Normal
</td>
</tr>
<tr>
<th>Priority</th>
<td>P2
</td>
</tr>
<tr>
<th>Component</th>
<td>Forms
</td>
</tr>
<tr>
<th>Assignee</th>
<td>webkit-unassigned@lists.webkit.org
</td>
</tr>
<tr>
<th>Reporter</th>
<td>geraldb+bugzilla@gmail.com
</td>
</tr></table>
<p>
<div>
<pre>Created <span class=""><a href="attachment.cgi?id=274964" name="attach_274964" title="This is how the screen looks when you click the label to the far-away input">attachment 274964</a> <a href="attachment.cgi?id=274964&action=edit" title="This is how the screen looks when you click the label to the far-away input">[details]</a></span>
This is how the screen looks when you click the label to the far-away input
When a label is clicked that is below it's "for" input, the input which receives focus should be scrolled to.
If the label is far below the input for some reason the scroll does not happen.
The input is focused and the keyboard comes up. When you begin to type the window will then scrolls to the input.
I first spotted this in iOS 9.2 and it continues to be in 9.3
Here is a link with an example of the issue:
<a href="http://mysmilies.com/junk/ios_no_scroll_on_label_click.html">http://mysmilies.com/junk/ios_no_scroll_on_label_click.html</a>
The code is simple:
<form>
<input id="search1">
<br>
<br>
<br>(repeat a lot of br tags)
<label for="search1">Click</label>
</form></pre>
</div>
</p>
<hr>
<span>You are receiving this mail because:</span>
<ul>
<li>You are the assignee for the bug.</li>
</ul>
</body>
</html>