Ionic 3 PWA -> iOS 11.4.1 issues

Tags: Ionic 3, PWA and iOS 11.x

Each new release of iOS means a new set of issues for your PWA.

I just noticed several issues when running my Ionic 3 PWA on iOS 11.4.1

  • after you use an input control (e.g., an <ion-textarea> or an <ion-searchbar>) the screen doesn’t resize correctly
  • <input #capture type="file" accept="image/*;capture=camera" ... > has stopped working

“Because of iOS challenges, Starbucks PWA is doing user-agent sniffing and delivering a different manifest for iOS, using display: browser instead of display: standalone.”

“Safari support (and bugs) are changing so fast that even if it works fine today, you might end up with a lousy implementation pretty soon.”

See: You shouldn’t use Chrome’s PWACompat library


  • PWA (no PhoneGap/Cordova plugins)
  • Hybrid Mobile App (PhoneGap/Cordova plugins)


1 Like

Ionic 3 PWA on iOS - Added to Home Screen - “display”: “standalone”

Tap on <ion-textarea>:

Enter some text:

Tap ‘Done’:

Screen doesn’t resize correctly.

Rotate device:

Screen doesn’t resize correctly.

Rotate device:

Screen doesn’t resize correctly.

Zoom in (pinch with two fingers):

Screen resizes correctly, however, if you rotate the device:

I should definitely give a try to this later today, I use the following in my app, hope I’m still good

<input #capture type="file" accept="image/x-png,image/jpeg" (change)="upload()">
1 Like

I use:

<input #capture type="file" accept="image/*;capture=camera" (change)="uploadFile($event)" class="custom-file-input">

It works without issue on Android, but it fails silently on iOS 11.4.x

I think I’ll go ahead and add Sentry support to my App.


Are you seeing any of the ‘sizing’ issues after you use a <ion-textarea> or an <ion-searchbar> ?

I should test later tonight too

I don’t use ion-textarea, only textarea but I use ion-searchbar I think

@robinyo sorry for the late feedback, doing as I displayed above for the camera/gallery still works like a charm with iOS 11.4.1 on iPhone 6s (real phone not simulated)

I tested my textarea, ion-textarea and ion-searchbar (in content) there all looked ok, no ‘sizing’ effect

1 Like


Thanks :slight_smile:

I thought it was related to the settings in my manifest (e.g., “display”: “standalone”).

But it turns out it was ‘meta’ tag related. I updated my “viewport” as follows:

<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, viewport-fit=cover">

1 Like

Cool nice to hear you found a solution :slight_smile: