Unwanted MD style on iOS device

Ionic Framework ionic-v3
1

Hi,

I am developing an ionic2 app on both android and iOS.

When I test the app with ionic serve -l, the iOS simulation shows iOS style, the android simulation shows MD style. For example, the icons are shown in their iOS (resp. MD) version. No problem here, this is how it is supposed to work…

But when I run the app on my iOS device (iPhone 6s), the app look is the MD look, not the iOS one…

I know it is possible to apply a specific (MD or iOS) style to both android & iOS, but I never wanted/configured that (and as mentioned above, the “ionic serve -l” simulation works fine).

Has anyone any idea of a fix to this issue please ?

Thank you vm !

P.S. :
Node version : v8.9.1
Cordova version : v7.1.0
Ionic version : v3.19.0

2

If you don’t like MD style, try to change styles of Ionic framework components.

All of them can be overridden & redesigned on your own scss file.

This segment for instance, has several SCSS files which can be restyled by yourself.

3

Thank you, actually I like the MD design for android devices, but not for iOS ones :wink: And it’s supposed to work this way ? :confused:
That’s the issue :frowning:

4

I don’t know if there’s a way to display android version MD on iOS…

But maybe you can work on that on SCSS?

Sorry, I don’t build anything for iOS at the moment so have no idea.

5

I would advise you to quickly create a new app with ionic start, add the platforms and build the app to see how it looks. If this is different from your app, something is going wrong in your app.

What is your ionic info output?

6

Didn’t think of creating a new app. Just did it, and the style on iOS is… iOS :slight_smile: So the issue comes from my app… I just don’t know where to look :confused:

My ionic info :

cli packages: (/usr/local/lib/node_modules)

@ionic/cli-utils  : 1.19.0
ionic (Ionic CLI) : 3.19.0

global packages:

cordova (Cordova CLI) : 7.1.0

local packages:

@ionic/app-scripts : 3.1.2
Cordova Platforms  : android 6.3.0 browser 5.0.1 ios 4.5.4
Ionic Framework    : ionic-angular 3.9.2

System:

ios-deploy : 1.9.2 
Node       : v8.9.1
npm        : 5.5.1 
OS         : macOS High Sierra
Xcode      : Xcode 9.2 Build version 9C40b

Environment Variables:

ANDROID_HOME : not set

Misc:

backend : pro
7

But at least you now know where the error comes from and that it could work.

Compare the ionic info of the two projects.
If that doesn’t offer any clues, I would advise you to check the main templates and .ts files first, then go deeper.
Or you could start copying stuff over to the new project and see where (and if) is breaks.