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.
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.
We tried two ways of embedding the shorthand site:
–> 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:
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:
- 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
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)?
> 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