Coridyn · May 3, 2017 13:18
diff --git a/ios-iframe-bug.html b/ios-iframe-bug.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>
	<!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>