9

I have a page on mysite.com that is using an iframe to pull in content from subdomain.mysite.com. I am using the iframe-resizer script (https://github.com/davidjbradshaw/iframe-resizer) to ensure that the height of the iframe always matches the height of its content. Works like a charm cross-browser/OS.

Within the iframe is a long form with client-side validation. If the user tries to submit the form and it doesn't fully validate, I use scrollTo (on the form page that's within the iframe) to scroll the page to the top of the form where they are presented with a detailed error message. This all works great across desktop browsers (Mac and Windows) and on all Android devices -- w/r/t scrollTo scrolling to the top of the form within the iframe.

However, on iOS, it does not work -- the scrolling to the top of the form that is inside the iframe does not happen. I've read about how, since 2011, on iOS you need to turn on the ability for the iframe to be scrolled -- I'm not sure if doing this would solve my issue. I read about adding style="overflow:auto; -webkit-overflow-scrolling:touch;" to the div that surrounds the iframe, and tried this, but it didn't have any impact.

I can't tell yet if I haven't found the right solution to get this working in iOS, or if there's no way for scrollTo to work inside of an iframe when on iOS. Thoughts?

David Bradshaw
  • 11,859
  • 3
  • 41
  • 70
Mary James
  • 256
  • 1
  • 3
  • 14

1 Answers1

0

I see that you are using iFrame-Resizer. This provides its own version of scrollTo() in the iframe that should overcome this issue, as it passes the request to the parent page.

if ('parentIFrame' in window) {
  parentIFrame.scrollTo(0,0)
} else {
  window.scrollTo(0,0)
}

https://github.com/davidjbradshaw/iframe-resizer/blob/master/docs/iframed_page/methods.md#scrolltoxy

David Bradshaw
  • 11,859
  • 3
  • 41
  • 70