[Ionic v4.0.0-beta.8] ios CSS fails (CSS not added correctly top ion-radio if using split pane and ion-* inside menu) #15514
Description
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 :D
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 :)