bug: Ionic 3, iOS 13.4.1, the framework shows the Android UI instead of the iOS UI (UI components)

[ionitron-bot]

Original issue by @ulver2812 on 2020-05-11T09:45:00Z

Bug Report

Ionic version:

[x] 3.x

Current behavior:
On iOS 13.4.1 the framework shows the Android UI instead of the iOS UI (UI components).
On iOS 12 it works correctly.

Expected behavior:
On iOS 13.4.1 the framework must shows the iOS UI (UI components).

Steps to reproduce:
Run an Ionic 3 app on iOS 13.4.1.

Related code:
I found this workaround to set iOS as the default UI, in src/app/app.module.ts

imports: [
IonicModule.forRoot(MyApp,{
    mode: 'ios'
})
],

Other information:

Ionic info:

Ionic:

   Ionic CLI          : 6.8.0 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework    : ionic-angular 3.9.9
   @ionic/app-scripts : 3.2.4

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : ios 5.1.1
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.2.1, (and 8 other plugins)

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   ios-sim : 8.0.2
   NodeJS  : v12.16.3 (/usr/local/bin/node)
   npm     : 6.14.4
   OS      : macOS Catalina
   Xcode   : Xcode 11.4.1 Build version 11E503a

[IMPMAC]

I am also experiencing this issue on iPad tablets showing the wrong UI.
I notice that this.platform.platforms() does not show the correct values, its empty with only cordova.

I notice that the status bar is also overlaying over the headers because the correct styles are not being applied

[ulver2812]

@IMPMAC Yes, I experiencing the same issues...

[sengoontoh]

Experiencing same issues as well.
platform.is('ios') is false on iPad
platforms array only has 'cordova' and 'core.
Any workarounds?

[ulver2812]

@sengoontoh yes, in app.module.ts I use this code:

imports: [
    IonicModule.forRoot(MyApp, {
    mode: 'ios'
    })
  ],

basically you have to set mode: 'ios' in the IonicModule.forRoot.

But this workaround is good if you are working only on iOS, because it forces the iOS UI also on Android 🙁.

[andrehhtm]

Same here, this.platform.is('ios') is returning ['cordova', 'core'] only.
Any fix? I am currently maintaining a version assuming it is iOS, without platform.is('ios') verification, for the AppStore.

[crazyserver]

Same here, we change all our platform.is('ios') to device.platform == 'iOS' using @ionic-native/device instead. However this only solves the issue inside of checking the platform inside the app but no the app styling itself.

The whole problem is caused by change on useragent done by iOS 13. The platform service rely on that user agent to get the device information.

[oddcb]

Hi. Are you all using wkwebview plugin with version greater than 4.1.3, e.g. 4.2.x or 5.0.0? See ionic-team/cordova-plugin-ionic-webview#556 (comment)

[oddcb]

My small fix that seems to work (not tested in all iOS-versions on device, only 14 + 13.5 in simulator, not tested for Android):

With webviewplugin version 4.2.0 or greater the user agent has changed. See comment above (#1104 (comment))

I assume that the cordova device-plugin cannot be relied on to be started when the ionic-angular properties are configured. So in app.module.ts I added the following function:

/**
 * ionic wkweb plugin after 4.1.3 returns userAgent with Macintosh, for instance
 * Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148
 */
export function determineMode() {
  const iOSStrings = ['ipod', 'ipad', 'iphone', 'macintosh'];
  const userAgent = window.navigator.userAgent.toLocaleLowerCase();
  return iOSStrings.find(searchString => userAgent.includes(searchString)) ? 'ios' : 'md';
}

The function more or less (I think) follows the logic in platform.ts: https://github.com/ionic-team/ionic-v3/blob/master/src/platform/platform.ts#L893 with the addition of 'macintosh'.

Besides that I had the problem that statusbar-padding class was not set. To me it seems like it should be set either way when the app is running in cordova, but again I assume the user agent change may have changed how this is determined.

Hence I hardcoded it in the config object passed to ionic-angular.

My modified config then contained in IonicModule.forRoot the following:

IonicModule.forRoot(YourApp, {
   mode: determineMode(),
   statusbarPadding: true,
   (.... your other properties if any)
}

[IMPMAC]

@oddcb Regarding your useful determineMode function.
I believe you would need to adjust to have the following on the return function:
return iOSStrings.find(searchString => userAgent.includes(searchString)) ? 'ios' : 'md';

At least that what I needed to do on ionic v3 to get the android theme working

[oddcb]

@oddcb Regarding your useful determineMode function.
I believe you would need to adjust to have the following on the return function:
return iOSStrings.find(searchString => userAgent.includes(searchString)) ? 'ios' : 'md';

At least that what I needed to do on ionic v3 to get the android theme working

@IMPMAC Thanks for spotting that. At the time I hadn't tested Android yet. :-) I've updated my comment.

[brassier]

@oddcb - for reference, it seems like your addition to check for macintosh is along the same lines of what the current Ionic codebase is doing too. Thanks for the helpful info.

ionic-team/ionic-framework#19258

const isIpad = (win: Window) => {
  // iOS 12 and below
  if (testUserAgent(win, /iPad/i)) {
    return true;
  }

  // iOS 13+
  if (testUserAgent(win, /Macintosh/i) && isMobile(win)) {
    return true;
  }

  return false;
};

const isIOS = (win: Window) =>
  testUserAgent(win, /iPhone|iPod/i) || isIpad(win);

For reference, their iPad check does also require an additional isMobile check, likely to confirm a device is not a desktop/laptop Macintosh. That snippet is below too:

const isMobile = (win: Window) =>
  matchMedia(win, '(any-pointer:coarse)');