InAppBrowser + iOS vertical scroll not functioning

Ionic Native
1

Hello! :wave:

I’ve created an extremely simple app based on the blank starter template that just wraps a website using InAppBrowser.

Using Android Studio via a virtual device, the app works as expected - the browser allows me to scroll a page vertically to read content therein.

However, using the Ionic DevApp on iOS 11.4.1 (iPhone) the page loads, but does not let me scroll vertically -it appears to be locked when I swipe up/down.

Has anyone seen anything like this before, or can provide any suggestions please?

Next up - I’m going to try DevApp on iOS 12.0.1 and also the Xcode Simulator.

Here’s my code:

home.html

<ion-header>
  <ion-navbar color="dark">
    <ion-title>
      InAppBrowser Test
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content overflow-scroll="true">
Waiting for InAppBrowser content...
</ion-content>

home.ts

import { Component } from '@angular/core';
import { InAppBrowser, InAppBrowserOptions } from "@ionic-native/in-app-browser";
import { Platform } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})

export class HomePage {
  constructor(
    private iab: InAppBrowser,
    private platform: Platform
  ) {
      const iabOptions: InAppBrowserOptions = {
        clearcache: 'yes',
        clearsessioncache: 'yes',
        hideurlbar: 'yes',
        location:'no',
        zoom:'no'
      }
      this.platform.ready().then(() => {
        const browser = this.iab.create('https://en.wikipedia.org/wiki/Ionic_(mobile_app_framework)','_self', iabOptions);
        browser.show();
      });
    }
}

Environment

$ ionic info
✔ Gathering environment info - done!

Ionic:

   ionic (Ionic CLI)  : 4.2.1 (/usr/local/lib/node_modules/ionic)
   Ionic Framework    : ionic-angular 3.9.2
   @ionic/app-scripts : 3.2.0

Cordova:

   cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms     : android 7.1.1, ios 4.5.5
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 2.2.0, (and 5 other plugins)

System:

   Android SDK Tools : 26.1.1 (/home/james/Android/Sdk)
   NodeJS            : v8.10.0 (/usr/bin/node)
   npm               : 3.5.2
   OS                : Linux 4.15

Thanks in advance for any help! LMK if I can provide any further info.

Cheers, James

2

With some further testing on iOS (now 12.0.1) in the DevApp, I’ve discovered that using pinch-to-zoom with finger + thumb, and then moving vertically (with both finger + thumb pressed down) will allow you to move down over the content - but you have to initiate that specific gesture first.

So, still not solved as I cannot use a single finger/thumb to swipe up/down to move vertically across content.

3

Update:

  • upgraded NodeJS to v10.12.0 and npm to v6.4.1
  • ran ionic repair; ionic build to get my project updated (e.g. deps, Node binding, etc.)

…but still not able to scroll vertically within the DevApp on iOS 12.0.1 :frowning:

4

Hi, I’ve got the same problem, has anyone found out the solution?

5

same problem to, any solution ?

6

I am facing the same problem. Did you found any solution?
(I have raised a bug in Inappbrowser github repo)

7

Same problem, any solution?

8

Same Problem! have any one solved that?