2 Replies Latest reply on Jan 5, 2018 1:08 PM by SmitB

    iFrame scrolling iOS

    dogofpavlov Level 1



      I've run into an issue in my app on iOS involving an iframe. Basically the app is a wrapper for an iframe. This issue isn't exactly related to PhoneGap, but it's an issue i assume many of you have faced.


      I'm very well aware of the css required to make an iframe scroll correctly on iOS using this:

      -webkit-overflow-scrolling:touch !important;


      basically you have to put this on the parent div of frame and then it will scroll...and although this does work there are some things that don't work correctly.


      To demonstrate this I've create a little demo including my companies website. I put borders around the main html (red) and the iframe html (green) to tell the difference.


      if you visit our site on your mobile phone: http://www.phonefusion.com/  and scroll down the page, you can see there will be a fixed header that appears to make navigation easier.


      First go here on your desktop: http://www.phonefusionvc.com/act/companion/test/test.html


      If you scroll down. you will see that the iframe scrolls WITHIN the border of the iframe. (Green border visible always, this is the correct behavior i want).


      Now go to the same place on Android: scroll down, you will see it behaving just like desktop, and the iframe scrolls WITHIN the border and you can see the border visible always.


      Now go to the same place on iOS:  scroll down, you will see it behaves differently, and the iframe WITH BORDER scrolls within the red border. I read that iOS does this on purpose. Is there ANY way to prevent it? Because the iframe is expanding to the height of the content, nothing inside the iframe that uses the users scroll position works correctly. Notice the fixed header is no longer working.


      I can't be the only person who has run into this. Is there anything to be done?  Please help