Ion-toggle on Samsung Internet Browser - toggle relies on contain:strict

Ionic Framework ionic-v3
1

Anyone have a hint why toggles appear “stretched” in the Samsung Internet Browser (version 5.4.00-75) on android?

image
image1080×776 79.5 KB

This is how the same slide displays in Chrome on Android:

image
image1080×819 81.6 KB

 <ion-slide>
      <ion-card>
        <h5>{{'WEBSHOP_SUMMARY_BEFORE_PAYMENT'| translate}}</h5>
        <ion-list>
          <ion-item (click)="presentTermsPopover()">
            <ion-label [innerHTML]="'WEBSHOP_ACCEPT_TERMS' | translate"></ion-label>
            <ion-toggle [(ngModel)]="acceptTerms"></ion-toggle>
          </ion-item>
          <ion-item>
            <ion-label>{{'WEBSHOP_ACCEPT_NEWSLETTER' | translate}}</ion-label>
            <ion-toggle [(ngModel)]="acceptNewsletter"></ion-toggle>
          </ion-item>
        </ion-list>

:

2

Sadly, the embedded webviews are all slightly different on Android. Two options, you could embed Crosswalk to standardize the browser. It will increase your APK size and the project is no longer active. Or you could attempt to see what is failing in the CSS and fix it locally or submit a PR to Ionic. I would make sure that you validate the issue on a basic Ionic template and it is not the result of some custom CSS that you might have applied.

Good luck

3

Well we’ve narrowed it down to

.toggle-wp {
position: relative;
width: 40px;
height: 18px;
box-sizing: content-box;
/* contain: strict; */
}

The contain:strict here is necessary otherwise you get the effect I showed above even in the Chrome Browser on android.
But contain:strict is not known in Webkit so…

Any tips appreciated…

4

More interesting to me is that -wp styles are being applied rather than -md styles.

I would open an issue on the repo on this

chris

5

We’re using Windows styles intentionally: in app.module.ts:

imports: [
BrowserModule,
HttpModule,
Ng2OrderModule,
IonicModule.forRoot(MyApp, {
mode: ‘wp’
}),

6

Switching to md we get:

.toggle-md {
position: relative;
padding: 12px;
width: 36px;
height: 14px;
box-sizing: content-box;
/* contain: strict; */
}

Also contains “contain:strict” which again does not work in Webkit

image