Scrolling issues with embedded content on iOS


#1

Hi there,

we are facing problems with the scrolling of embedded “external” html content in ionic 3 on iOS devices (it occurs in safari and chrome browser on iOS). It is a “long-page” scrolling content, generated with the editor/framework shorthand.com.

Environment

The Browser/Web version of the app has 1st priority (native apps may follow), so this is only about browser version of ionic 3 in iOS BROWSERS.

The shorthand page on it’s own (without any ionic code) is working without any issues on iOS. So something goes wrong as soon as ionic comes in.

Embedding

We tried two ways of embedding the shorthand site:

  1. with iframe
    –> works fine in browsers on any platform but iOS: Scrolling stops working after some scrolling and bounces back to top -> video demonstrating this issue: https://drive.google.com/file/d/0B5nN-yQ-x5avWG5FVUhaTXZUQUk/view?usp=sharing
    –> besides, shorthand does not currently support the integration with iframes:
    https://shorthand.com/support/#article/78557/export-and-self-host-process

  2. So we started working out another way (to get it work on iOS browsers as well, at least):
    embed content directly (html code with references to js/css)
    –> iOS issue: flicker effect, especially on sticky elements (background images that should not scroll)

Project to isolate/reproduce

To isolate the iOS flicker problem, I created a blank Ionic (3.1.1) project and:

Possible causes

shorthand scrolling (they seem to use scrollmation.js jquery) might interfere with the ionic scrolling…
it feels like ionic is taking over control of the scroll and passing it through, rather than using native scrolling.

I already spent hours, if not days, looking into this and the iframe issue, trying out dozens blog/forum suggestions… without any luck…
Anybody any clue how to fix this or how to troubleshoot this any further?
Has anybody experienced something similar on iOS devices?
Or are there other ways of embedding a site (where this iOS issues might not occur)?

Thank you!

Arno

> ionic info

Cordova CLI: 6.5.0
Ionic Framework Version: 3.1.1
Ionic CLI Version: 2.2.3
Ionic App Lib Version: 2.2.1
Ionic App Scripts Version: 1.3.6
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 10
Node Version: v6.9.4
Xcode version: Not installed