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

[ionitron-bot[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 https://github.com/ionic-team/cordova-plugin-ionic-webview/issues/556#issuecomment-708282656

[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 (https://github.com/ionic-team/ionic-v3/issues/1104#issuecomment-708283006)

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.

https://github.com/ionic-team/ionic-framework/pull/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)');

[Shane98c]

I'm seeing a more severe version of this issue, triggered by update to cordova-ios@6. Not only is the ios platform not added for styling purposes, cordova is not available, leading to plugin failure. Is anyone else seeing something similar?

[fbrun]

Hi,

same error under iPad. this.platform.is('ios') is returning ['cordova', 'core']only. I tried this solution:

if (overrideUserAgent != nil) {
    wkWebView.customUserAgent = overrideUserAgent;
} else if ([self.viewController isKindOfClass:[CDVViewController class]]) {
    wkWebView.customUserAgent = ((CDVViewController*) self.viewController).userAgent;
}

but under iOS14, i have the error IOS build failed for IOS 14 - Property ‘userAgent’ not found on object of type ‘CDVViewController *’

My ionic info:

Ionic:

   Ionic CLI          : 6.17.0
   Ionic Framework    : ionic-angular 3.9.10
   @ionic/app-scripts : 3.2.4

Cordova:

   Cordova CLI       : 10.0.0
   Cordova Platforms : android 10.1.0, ios 6.2.0
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 5.0.0, (and 16 other plugins)

Utility:

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

System:

   Android SDK Tools : 26.1.1 
   NodeJS            : v12.22.3 
   npm               : 6.14.13
   OS                : Linux 5.4

[lempere]

I was trying the previous solutions, and the icons was working but the ion-app classes wasn't properly filled with platform-ios or platform-mobile, etc.

That is why I made a fork of webview@5.0.0 and simulate the older userAgent to avoid the ios detections problems

https://github.com/we-are-Joinup/cordova-plugin-ionic-webview/commit/57fc6028ec37c4c8287dfe389bc2806ddfbe0010

With that change, the icons works fine, the classes are filled and the this.platform._platforms return all the sets like the older versions: ["cordova", "mobile", "ios", "tablet", "ipad"]

[fbrun]

I tried your change under ipad@14.6 but platform.platforms() always return only ['cordova', 'core'] values

[lempere]

@fbrun Did you try my changes? Did you install this fork in the branch 5.x.x ? Did you have OverrideUserAgent or AppendUserAgent setted ?

I installed this fork with ionic@3.9.2, and tested in devices ipad7@13.1.1 , iphone7@14.7.1 and some ipad simulators 11.4, 14.3, for now I didn't see the problem.

[fbrun]

We just change code from the screen. We will try to install it correctly, thanks

[jake-moritz-trifecta]

I was trying the previous solutions, and the icons was working but the ion-app classes wasn't properly filled with platform-ios or platform-mobile, etc.

That is why I made a fork of webview@5.0.0 and simulate the older userAgent to avoid the ios detections problems

we-are-Joinup/cordova-plugin-ionic-webview@57fc602

With that change, the icons works fine, the classes are filled and the this.platform._platforms return all the sets like the older versions: ["cordova", "mobile", "ios", "tablet", "ipad"]

This seemed to work for me, thank you.