javascript - Calling element.focus() in iframe scrolls parent page to random position in Safari iOS10 -


safari on ios 10.1.1 seems have bug when setting focus on element inside iframe.

when call element.focus() on element inside iframe, safari scroll parent page down , move focussed element off-screen (instead of scrolling focussed element view).

however, happens if element in iframe taller device screen height (shorter iframes ok).

so if there 2 elements, 1 @ top of iframe , 1 further down page, first focus fine second 1 jump off-screen when set focus.

to me looks safari trying scroll element view maths wrong , end scrolling random position further down page. works ok in ios9 think new bug in ios10.

is way of preventing parent page scrolling or other way of avoiding bug?

i've put one-page gist replicates issue on ios 10 devices or simulator.

here a url can use on phone: goo.gl/qyi7oe

here's plunker can check desktop behaviour: https://embed.plnkr.co/d61ktglzbvtvydz4amqb/

and gist version of plunker: https://gist.github.com/coridyn/86b0c335a3e5bf72e88589953566b358

here's runnable version of gist (the shortened url above points here): https://rawgit.com/coridyn/86b0c335a3e5bf72e88589953566b358/raw/62a792bfec69b2c8fb02b3e99ff712abda8efecf/ios-iframe-bug.html

index.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>      <!--     keep one-page example, content below inserted iframe using `srcdoc` attribute.      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 , press 'focus green' or 'focus red' button.</p>      <h2>'focus green'</h2>     <p><b>expected:</b> should set focus on '.green-block' , scroll top of page.</p>     <p><b>actual:</b> sets focus not scroll page.</p>      <h2>'focus red'</h2>     <p><b>expected:</b> should set focus on '.red-block' , not scroll page (because element on-screen).</p>     <p><b>actual:</b> sets focus , scrolls down bottom of host page.</p>      <hr/>      <p class="spacer">1 filler content force 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 top of page, on ios10 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, on ios10 view scrolls bottom of page</p>     </div>      <p class="spacer">20 filler content force visible scrolling 20</p>     <p>bottom of iframe</p>  </div>     </script>  </body> </html>

things we've found:

  • the issue happens on ios 10+ in both safari , chrome
  • the issue does not happen on safari ios 9.3.2 (behaviour matches desktop browser, expected)
  • the problem happens when focussing on non-input html elements e.g. divs, spans, anchor tags, etc; setting focus on input elements works correctly
  • desktop safari works fine
  • it's parent page scrolling, not iframe (the iframe sized 100% of content avoid scrolling inside frame)
  • we've tried calling preventdefault on parent page with: window.onscroll = (event) => event.preventdefault(); doesn't work because the scroll event not cancelable
  • the scroll event raised on parent page seems come safari/webkit because there no other functions in callstack (when inspecting devtools , error.stack)

i had similar issue scroll jumping around on ios. happening on ios versions me, 8, 9 , 10.

testing plunker in real ios 10 device didn't cause problem me. not sure if tested correctly.

can try version of plunker on ios? https://embed.plnkr.co/nutgqw/

my workaround issue make sure body , html tag in iframe content had defined 100% height , width, , overflow scroll. able force iframe's dimension. prevented scroll jumping.

let me know if helps.


Comments

Post a Comment

Popular posts from this blog

php - How to add and update images or image url in Volusion using Volusion API -

actually have store importing products store product data insert , update image or image url not insert , update. this xml code name datapro.txt. <products_joined> <productcode>3710_012t</productcode> <vendor_partno>eah5450silent/di/1gd3(lp)</vendor_partno> <productname>test product ta</productname> <hideproduct>n</hideproduct> <stockstatus>20</stockstatus> <lastmodified>1/5/2016 10:25:00 am</lastmodified> <lastmodby>2</lastmodby> <productweight>0.9</productweight> <productprice>100</productprice> <productmanufacturer>asus tek</productmanufacturer> <vendor_price>32.69</vendor_price> <numproductssharingstock>0</numproductssharingstock> <categoryids>107</categoryids> <producturl>http://tebkq.mvlce.servertrust.com/productdetails.asp?productcode=3710_012t</producturl>
Read more

javascript - IE9 error '$'is not defined -

Image
<!--[if lte ie 9]><html class="lte9"><![endif]--><!--[if gt ie 9]><html><![endif]--> <!--[if !ie]><!--> <html> <!--<![endif]--> blah blah <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="{{ asset('js/mypage.js') }}" type="text/javascript"></script> </body> </html> when load page, ie9 brings error '$' not defined . how can solve error? +++ mypage.js $(function(){ //when load page, //ie9 tag not moving. $(window).load(function() { $('div.mask').hide(); }); // when click , willshow show. //for not ie 9 if (!$('html').hasclass('lte9')) { var = $('ul.about > li > span.activebtn');
Read more