Search code examples
javascriptjqueryiosiframefancybox

iFrame FancyBox 2.1.4 in iOS - Iframe Scrolls up After Interacting with Div Using Javascript

When moving and displaying a div in a Fancybox iFrame (using javascript) in iOS devices, the iframe scrolls to top of the window and the user has to scroll back down to see the div. In non-iOS devices the div is moved into view without the iFrame scrolling up (which is what I want).

https://embed.plnkr.co/MhUHCeAaN6VVsllmovTj/

Steps to reproduce:

  1. Navigate to the above url on an iPad using Safari
  2. Tap "Open Fancy Box"
  3. Scroll down and tap the "Click ME!" button
  4. Notice the iFrame scrolls to the top.

The button creates a div, moves it to the top right of the point that was tapped, and makes it visible.

I confirmed this behavior on:

iPad (iOS 11.2.6)

  • Safari
  • Chrome
  • Mozilla Firefox

iPhone (iOS 11.2.6)

  • Safari

I confirmed this behavior does not happen on:

Windows 10

  • Safari (v 5.1.7)
  • Chrome
  • Mozilla Firefox

Android (7.0)

  • Chrome

I have tried the answer provided in this thread: fancybox2 / fancybox causes page to to jump to the top, but the iFrame still scrolls up after the button is tapped, and then locks the iFrame so you can't scroll back down.

I also tried using jQuery to scroll to the desired div (selecting with an id) after the onclick function finishes, but the iFrame doesn't move. Using "SLaks" suggestion here: How do you scroll an iframe from within using jquery?

Solution

  • I agree with Janis, this seems to be an issue with iOS specifically. So, I will create or upvote a corresponding bug ticket on the Apple website.