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:
-
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 -
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:
- pasted the shorthand html stuff to the index.html (head and body parts of the code)
- wrap shorthandarticle element into ion-content with the help of ng-include (custom angular directive, see ngInclude.ts) -> there may be a better way of doing this?
- Please have a look a this video, to see the flicker effect on ios:
- https://drive.google.com/file/d/0B5nN-yQ-x5avYldJSHlpSDNZdlE/view?usp=sharing
- The resulting WebApp is hosted here:
- https://lucernewater.ch/ionic-shorthand-1/index.html (browse here on a iOS device to see the flicker issue)
- code repo: https://git.wasserfuerwasser.ch/arno/ionic-shorthand-1
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