<!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>
/* Styles go here */
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<style>
.green-block {
width: 20px;
height: 20px;
background-color: green;
}
.red-block {
width: 20px;
height: 20px;
background-color: red;
}
</style>
<script>
function focusEl(event, selector){
event.preventDefault();
document.querySelector(selector).focus();
}
</script>
</head>
<body>
<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>1 Filler content to force some visible scrolling 1</p>
<p>2 Filler content to force some visible scrolling 2</p>
<p>3 Filler content to force some visible scrolling 3</p>
<p>4 Filler content to force some visible scrolling 4</p>
<p>5 Filler content to force some visible scrolling 5</p>
<p>6 Filler content to force some visible scrolling 6</p>
<p>7 Filler content to force some visible scrolling 7</p>
<p>8 Filler content to force some visible scrolling 8</p>
<p>9 Filler content to force some visible scrolling 9</p>
<p>10 Filler content to force some visible scrolling 10</p>
<p>11 Filler content to force some visible scrolling 11</p>
<p>12 Filler content to force some visible scrolling 12</p>
<p>13 Filler content to force some visible scrolling 13</p>
<p>14 Filler content to force some visible scrolling 14</p>
<p>15 Filler content to force some visible scrolling 15</p>
<p>16 Filler content to force some visible scrolling 16</p>
<p>17 Filler content to force some visible scrolling 17</p>
<p>18 Filler content to force some visible scrolling 18</p>
<p>19 Filler content to force some visible scrolling 19</p>
<div class="red-block" tabindex="0"></div>
<div>
<button onclick="focusEl(event, '.green-block');">Focus Green</button>
<button onclick="focusEl(event, '.red-block');">Focus Red</button>
</div>
<p>20 Filler content to force some visible scrolling 20</p>
<p>21 Filler content to force some visible scrolling 21</p>
<p>22 Filler content to force some visible scrolling 22</p>
<p>23 Filler content to force some visible scrolling 23</p>
<p>24 Filler content to force some visible scrolling 24</p>
<p>25 Filler content to force some visible scrolling 25</p>
<p>26 Filler content to force some visible scrolling 26</p>
<p>27 Filler content to force some visible scrolling 27</p>
<p>28 Filler content to force some visible scrolling 28</p>
<p>29 Filler content to force some visible scrolling 29</p>
<p>30 Filler content to force some visible scrolling 30</p>
<p>31 Filler content to force some visible scrolling 30</p>
<p>32 Filler content to force some visible scrolling 30</p>
<p>33 Filler content to force some visible scrolling 30</p>
<p>34 Filler content to force some visible scrolling 30</p>
<p>35 Filler content to force some visible scrolling 30</p>
<p>Bottom of iframe</p>
</body>
</html>