Ionic-framework: bug: iPad on iOS 13 runs in md-mode (probably desktop mode)

Created on 8 Aug 2019 · 13Comments · Source: ionic-team/ionic-framework

Bug Report

Ionic version:
[x] 4.7.4

Current behavior:
iOS 13 iPad runs md/android/desktop UI elements

Expected behavior:
iPad should show iOS UI elements

Steps to reproduce:
open an ionic app on an iPad with iOS 13 (sim or native)

core bug

Source

chriswep

👍5

Most helpful comment

@barrcodes - upgrade

This was fixed in 4.9.1 (https://github.com/ionic-team/ionic/blob/master/CHANGELOG.md#491-2019-09-16), but the latest is 4.11.7 so ideally you would just go to that.

Another advantage there is that you will start getting deprecation warnings in the build and in the console log that will aid you in getting ready for v5 by pointing out where you are using deprecated constructs.

So win-win there...

kensodemann on 14 Dec 2019

🎉1 👍1

All 13 comments

Linking related thread: https://github.com/ionic-team/ionic/issues/17631

liamdebeasi on 9 Aug 2019

This issue is still present on 4.11.2

Running on the iPad with iOS 13 I'm getting these values:

navigator.userAgent = Mozilla/5.0 Google
navigator.platform = iPad

Also the html tag only have these classes: "plt-cordova plt-mobile plt-hybrid md hydrated" and the mode is set to md.

fmendoza on 24 Oct 2019

I placed the following function to detect iOS devices including those with iOS 13

public get isApple(): boolean {
    return this.platform.is('ios') ||
    /iPad|iPhone|iPod/.test(navigator.platform) ||
    (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1)
}

fmendoza on 24 Oct 2019

Can you provide a reproduction of this issue? The original issue was fixed in Ionic 4.9.1. I am testing a starter app on iPadOS using Ionic 4.11.2 and the app is starting in iOS mode for me.

liamdebeasi on 24 Oct 2019

You're correct. I can't reproduce the issue with the starter template. Will inspect more deeply to try to find what's happening.

fmendoza on 24 Oct 2019

👍1

I just discovered what was causing the issue.

Basically I overwrote the userAgent on my config.xml (see related issue)... seems that the routine detection checks for the user agent and that's why I was having MD mode on my iOS devices/emulators.

<preference name="OverrideUserAgent" value="Mozilla/5.0 Google" />

fmendoza on 28 Oct 2019

Ah ok that makes sense -- we check user agent strings to help detect the platform. If you were to remove OverrideUserAgent does the issue go away?

liamdebeasi on 29 Oct 2019

Yeah removing OverrideUserAgent fix the issue.

fmendoza on 30 Oct 2019

👍1

Ok great - glad that the issue is resolved by removing OverrideUserAgent.

@chriswep Are you still running into this issue when running the latest version of Ionic?

liamdebeasi on 30 Oct 2019

I am getting this issue in 4.8.1... Was about to make a new issue and saw this one. I double-checked and I am not using OverrideUserAgent

Description:
By default, using IonicModule.forRoot() with no platform style specified, the system style is being used correctly within the iOS emulator and BrowserStack. However, on iPad physical devices, the root html element has mode=md, and all styles default to android styling.

Steps to Reproduce:

Create an Ionic 4 project with Capacitor
Run the project on an iPad device
Use Safari developer tools to debug the html of the page
The root element will say <html ... mode=md>

My ionic info:

Ionic:

   Ionic CLI                     : 5.4.13
   Ionic Framework               : @ionic/angular 4.8.1
   @angular-devkit/build-angular : 0.801.3
   @angular-devkit/schematics    : 8.1.3
   @angular/cli                  : 8.1.3
   @ionic/angular-toolkit        : 2.0.0

Capacitor:

   Capacitor CLI   : 1.4.0
   @capacitor/core : 1.4.0

Cordova:

   Cordova CLI       : 9.0.0 ([email protected])
   Cordova Platforms : none
   Cordova Plugins   : no whitelisted plugins (3 plugins total)

Utility:

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

System:

   NodeJS : v12.9.1 (/Users/matthewbarr/.nvm/versions/node/v12.9.1/bin/node)
   npm    : 6.10.2
   OS     : macOS Catalina
   Xcode  : Xcode 11.3 Build version 11C29

barrcodes on 14 Dec 2019

@barrcodes - upgrade

This was fixed in 4.9.1 (https://github.com/ionic-team/ionic/blob/master/CHANGELOG.md#491-2019-09-16), but the latest is 4.11.7 so ideally you would just go to that.

So win-win there...

kensodemann on 14 Dec 2019

🎉1 👍1

Thanks for the issue. I am going to close this as it looks like the issue has been resolved. If anyone is still running into this, please open a new issue.

liamdebeasi on 14 Jan 2020

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.