[Ionic v4.0.0-beta.8] ios CSS fails (CSS not added correctly top ion-radio if using split pane and ion-* inside menu)

TL;DR Repository for checking:

https://github.com/paulstelzer/ionic-testing

If you run npm install and npm start you will see in ios mode the radio button is not working correctly (css is wrong and after one change it’s not working anymore). If you open app.component.html and remove the part between <ion-content> it will working 😄

UPDATE 2018-09-12: I think it has not to do with the CSS. I replaced the content of the radio component radio.ios.scss with radio.md.scss but the issue was the same. So I think something else in ios mode generates that issue.

In my case it also effects other components like <ion-item> and more which do not have the correct css styles

Describe the Bug I tested my app on iOS (Safari) where the ios mode is standard. I found out that most of the components looks ugly. Even more the ion-input / ion-radio and more not working correctly / don’t look as expected. Afterwards I tested in on Chrome by adding the ios-mode to the components (look at the code below)

In md-mode everything looks good:

In ios-mode the same code looks like this:

With this I cannot even switch to “Deutsch” (German)

Both screenshots are from latest Chrome - the only difference is the mode (ios vs md). I couldn’t figured out why the ios-mode not working correctly, maybe another one has an idea / a fix.

Related Code

<ion-radio-group [(ngModel)]="selectedLanguage" (click)="radioButtonGroupClicked()">
  <ion-item mode="ios" *ngFor="let lang of languages">
    <ion-label mode="ios">{{lang.name}}</ion-label>
    <ion-radio mode="ios" slot="start" (ionSelect)="applyLanguage(lang.code)" [value]="lang.code" [id]="lang.code" name="language"></ion-radio>
  </ion-item>
</ion-radio-group>

BUT NOW THE FUNNY THING: This only happens if a <ion-item> / <ion-list> / <ion-item-group> is in the menu! I created a repository so you can check it 😃

[luishmcmoreno]

I have similar problems with styles not being injected correctly. I think it could be something related with lazy loading.

Maybe this issue is related to https://github.com/ionic-team/ionic/issues/15174 .

[ionitron-bot[bot]]

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.