Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
DavidStrausz opened this issue Feb 18, 2019 · 13 comments

Comments

Projects
None yet
4 participants
@DavidStrausz
Copy link
Contributor

commented Feb 18, 2019

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.

ezgif com-video-to-gif

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:

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

@ionitron-bot ionitron-bot bot added the triage label Feb 18, 2019

@liamdebeasi

This comment has been minimized.

Copy link
Member

commented Feb 18, 2019

Hi there,

Thanks for opening an issue with us! Crosswalk has been discontinued since 2017. Could you try building your app without Crosswalk and see if you can reproduce this issue?

Thanks!

@ionitron-bot ionitron-bot bot removed the triage label Feb 18, 2019

@DavidStrausz

This comment has been minimized.

Copy link
Contributor Author

commented Feb 18, 2019

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.

@ionitron-bot ionitron-bot bot added triage and removed needs: reply labels Feb 18, 2019

@liamdebeasi

This comment has been minimized.

Copy link
Member

commented Feb 19, 2019

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

@wcmhc

This comment has been minimized.

Copy link

commented Feb 22, 2019

Just ran into the same issue with the base Android 8.1 release #17501 (comment)

@Desever

This comment has been minimized.

Copy link

commented Mar 18, 2019

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

the code not work

@liamdebeasi

This comment has been minimized.

Copy link
Member

commented Mar 18, 2019

Hi @Desever,

If you are running into a problem with an Ionic component, please open a new issue. Thanks!

@Desever

This comment has been minimized.

Copy link

commented Mar 18, 2019

@liamdebeasi

This comment has been minimized.

Copy link
Member

commented Mar 18, 2019

Hi @Desever,

I misunderstood your comment as having to do with another issue. I've closed the issue you made and we can continue discussion here. Sorry for the confusion!

@liamdebeasi

This comment has been minimized.

Copy link
Member

commented Mar 18, 2019

@Desever,

As I understand, you are running into the same issue. Can you post the output of ionic info as well as your user agent string when testing on a device? You can find this by logging window.navigator.userAgent.

Thanks!

@Desever

This comment has been minimized.

Copy link

commented Mar 18, 2019

I think,the svg not add transform-origin: center;

@Desever

This comment has been minimized.

Copy link

commented Mar 18, 2019

I add style(transform-origin: center;) to global.scss,but this not work

@Desever

This comment has been minimized.

Copy link

commented Mar 18, 2019

image

please tell me,the style write where

@ionitron-bot

This comment has been minimized.

Copy link

commented Apr 26, 2019

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.

@ionitron-bot ionitron-bot bot locked and limited conversation to collaborators Apr 26, 2019

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
You can’t perform that action at this time.