Given this example code, why, when submitting the form on iOS Safari/Chrome does the browser not scroll the page to the top and show the validation error on required radio boxes?
This works as expected on the text input field and also on the desktop versions of these browsers and on Android.
If the text padding is removed to shorten the page so that the fields fit within the viewport, the validation message is shown.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Form Radio Test</title>
</head>
<body>
<p>iOS Safari/Chrome does not scroll the page/focus on required radio or checkbox input fields when submitting the form. It does however do this on text fields.</p>
<form>
<fieldset>
<legend>Select an option (required)</legend>
<p>
<label for="a">A</label>
<input name="a" type="radio" value="a" id="a" required>
<label for="b">B</label>
<input name="a" type="radio" value="b" id="b" required>
</p>
</fieldset>
<fieldset>
<legend>Enter a value (required)</legend>
<p>
<label for="c">C</label>
<input name="c" type="text" id="c" required>
</p>
</fieldset>
<div id="padding">
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
</div>
<p><button>Submit</button></p>
</form>
<p>
<a href="#" onclick="document.getElementById('padding').style.display='none';return false">Hide padding</a> |
<a href="#" onclick="document.getElementById('padding').style.display='block';return false">Show padding</a>
</p>
</body>
</html>I've reported the bug to Apple via their Safari bug report/feedback page, but I'm not sure if that's the right place to report it.