[Ionic v4] CSS issues on Chrome 53 (crosswalk)

Bug Report

Ionic version: [x] 4.x

Current behavior: ion-checkbox and ion-spinner styles are broken on Chrome 53.0.2.2785.143 (the version which is shipped with crosswalk). Most probably also other Chrome Versions are affected.

Expected behavior: Correct styles on Chrome 53.

Steps to reproduce: (check example repo)

1. Add an ion-checkbox or ion-spinner to a blank ionic v4 project
2. Add cordova + crosswalk
3. Run on Android device

Related code: https://github.com/DavidStrausz/ionic-v4-css-bugs

Other information:

• Related: #17501
• The problem with the checkbox seems to be the contain property being set to strict, changing it to none fixes the issue: https://github.com/ionic-team/ionic/blob/master/core/src/components/checkbox/checkbox.scss#L58

Ionic info:

Ionic:
   ionic (Ionic CLI): 4.10.3 
   Ionic Framework: @ionic/angular 4.0.1
   @angular-devkit/build-angular: 0.12.4
   @angular-devkit/schematics: 7.2.4
   @angular/cli: 7.2.4
   @ionic/angular-toolkit: 1.4.0
Cordova:
   cordova (Cordova CLI): 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms: android 6.5.0-dev
   Cordova Plugins: no whitelisted plugins (6 plugins total)
System:
   Android SDK Tools : 26.1.1
   NodeJS: v9.4.0
   npm: 5.8.0
   OS: Windows 10

[liamdebeasi]

Thanks for the additional information 🙂. I was able to reproduce this issue on Android 4.4 with Chrome 30.

[DavidStrausz]

Hi, I’m aware, we still need support for Android 4.1 - 4.4 for our customer base.

When disabling Crosswalk it works fine, but this should just work fine as Android 4.4, which initially shipped with Chrome 30, is listed as minimum requirement for Ionic 4.

Also in the related issue someone mentioned the spinner animation does also not work on Chrome 61 which indicates there is something wrong. And finally CSS containment should be supported since Chrome version 52 which also tells me there is something wrong as other components which use CSS containment just work fine.

At least the checkbox bug should be easy to fix by changing CSS containment to none (default behaviour), although I don’t know if you guys had a reason for setting it to strict.

Edit: I just found out that the weird spinner animation is due to a missing transform-origin of the ion-spinner component which is why the UA style sheet of Chrome 53 is causing this behaviour via this selector:

svg:not(:root) {
  transform-origin: 0px 0px 0px;
}

So this could also be resolved rather easy by providing a correct transform-origin with higher specificity.