Ionic-framework: css variable issues with older versions of the android webview

[LuizTokuhara]

Bug Report

Ionic version:


[x] 4.x

Current behavior:
When changing the value from variable.scss, it only works on Android 7 and 8.
Android 5 and 6 do not respect the changes.

Expected behavior:
Show the color from variable.scss, run the app on Android 5 or 6.

Steps to reproduce:
Change any variable color from variable.css
Example: if change the "primary color" to black, when on Android 5 or 6 it will display blue instead.
Do not work even if we create a custom variable color, it will display blank.

Related code:
--ion-color-primary: #222;
--ion-color-primary-rgb: 10, 10, 10;
--ion-color-primary-contrast: #ffffff;
--ion-color-primary-contrast-rgb: 255, 255, 255;
--ion-color-primary-shade: #444;
--ion-color-primary-tint: #555;

Other information:

Ionic info:

Ionic:

   ionic (Ionic CLI)             : 4.12.0 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.1.1
   @angular-devkit/build-angular : 0.13.5
   @angular-devkit/schematics    : 7.2.4
   @angular/cli                  : 7.3.5
   @ionic/angular-toolkit        : 1.4.0

Cordova:

   cordova (Cordova CLI) : 8.1.2 ([email protected])
   Cordova Platforms     : android 7.1.4
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 3.1.2, (and 4 other plugins)

System:

   Android SDK Tools : 26.1.1 (/Users/luizimac/Library/Android/sdk)
   ios-deploy        : 1.8.5
   NodeJS            : v10.15.0 (/usr/local/bin/node)
   npm               : 6.4.1
   OS                : macOS Sierra
![ionic-css-bug](https://user-images.githubusercontent.com/26283844/54328135-8dca7e80-45eb-11e9-8cb2-cf2fce98b0ba.jpg)

[SmirnovM91]

+1

[liamdebeasi]

Hi there,

Thanks for the issue! Would you be able to post your user agent string when running your app on Android 5/6? You can find this by logging window.navigator.userAgent to the console.

Thanks!

[LuizTokuhara]

Agent from simulator:
Mozilla/5.0 (Linux; Android 5.0; Google Nexus 5 - 5.0.0 - API 21 - 1080x1920 Build/LRX21M) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/37.0.0.0 Mobile Safari/537.36

By the way, the color won't work on all components (buttons, toolbar...).
If i set transparent for ion-item, it is not working too for android 5 and 6.

ion-item{
--background: transparent;
}

[liamdebeasi]

Thanks for the follow up! So Chrome 37 does not support CSS Variables natively (https://caniuse.com/#feat=css-variables); however, your browser should be getting served a polyfill that lets you use them.

Can you provide a repository with the code required to reproduce this issue?

Thanks!

[LuizTokuhara]

Sure, it is a blank project actually.
I have attached it.
Archive.zip

[ibrahimAboelsuod]

@liamdebeasi I have the same problem-in a blank & real apps-, any idea what could be causing it?

[SmirnovM91]

Try to uncomment polyfill array in polyfill.ts

[liamdebeasi]

Hi everyone,

Just wanted to update you all on my progress.

I have been able to reproduce this issue. It seems that the polyfill for CSS variables is not being served up on certain versions of Chrome that need it.

This is a polyfill that is supposed to be automatically served when necessary by Stencil, so you should not need to enable anything in polyfills.ts.

I will post here when I have more information.

Thanks!

[ibrahimAboelsuod]

@liamdebeasi Any idea about a polyfill we can manually inject to temporary fix this? Also, Good luck !

[liamdebeasi]

Hi everyone,

There are some changes to Stencil actively being worked on that we think may resolve this issue. I am going to do some testing with it later this week and will post here when I have an update.

In terms of polyfills as a temporary stop gap, you could give this polyfill a shot: https://www.npmjs.com/package/css-vars-ponyfill.

Thanks!

[LautaroLorenz]

without any polyfill,
simply putting in the scss file
for example, change:

/* from: only modern browsers */
ion-toolbar {
  --background: var(--ion-color-primary);
}

/* to: all browsers */
ion-toolbar {
  background: var(--ion-color-primary);
  --background: var(--ion-color-primary);
}

it worked for me, tested on a default android emulator API 5.0
I do not know if it works for all the components

[fortunatogreco]

@liamdebeasi you have any news for this bug on Android 5 and 6? I try with css-vars-ponyfill but haven't a good result.

[royanon]

same issue here. Is there a fix in the next release?

[liamdebeasi]

Hi there,
Not yet. I will update this thread when there is a fix in place.

Thanks!

[christianguevara]

To make it work i did:

Inside :root in variables.scss

--ion-color-aname: #294e9b;
--ion-color-aname-rgb: 41, 78, 155;
--ion-color-aname-contrast: #ffffff;
--ion-color-aname-contrast-rgb: 255, 255, 255;
--ion-color-aname-shade: #244588;
--ion-color-aname-tint: #3e60a5;

.ion-color-aname {
    --ion-color-base: #294e9b;
    --ion-color-base-rgb: 41, 78, 155;
    --ion-color-contrast: #ffffff;
    --ion-color-contrast-rgb: 255, 255, 255;
    --ion-color-shade: #244588;
    --ion-color-tint: #3e60a5;
  }

And then in the you can use color="aname", you can change to any name and use it with compat for Chrome < 55

[JosueArronis]

Hello I have the same issue, someone already fine a permanent or temporary solution for this bug ?

[pipoa]

Any update for this? It confused us very much using Ionic4.

[remisture]

Still no fix for this? This is pretty bad!

[jjvillavicencio]

Any temporary correction while waiting for an official response?

[marxxx]

Same problem with Android 5.1. Hope the fix will come out soon.

[shahramSo]

Same problem with Android versions 4.4 , 5.1, 6 respectively API 19, 22, 23.

[liamdebeasi]

Hi everyone,

Are people testing this on simulators or on actual devices? We strongly recommend testing on physical devices as those will have updated webviews. Emulators cannot auto-update their webview, so they are stuck at whatever version the OS shipped with.

edit: Starting with Android 7 you can create emulators with Google Play Services: https://androidstudio.googleblog.com/2017/04/google-play-system-images-android.html

[christianguevara]

Just a clarification there, Android Studio emulator can be created with Google Play Services and it allows to update the webview.

[liamdebeasi]

@christianguevara I believe that only works for emulators running Android 7.0+. I'll try again on my end, but last time I checked that was the case.

edit: see "Google Play Support" https://android-developers.googleblog.com/2017/12/quick-boot-top-features-in-android.html

[marxxx]

I tested it on both, physical device (Android 5.1) and emulator. Both have same problem with css vars.

[liamdebeasi]

@marxxx What version of the webview is your physical device running?

[marxxx]

@liamdebeasi
Mozilla/5.0 (Linux; Android 5.1; Android Handheld Terminal Build/LMY47D) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/39.0.0.0 Mobile Safari/537.36

All my Play Store packages are up to date on that device.

[liamdebeasi]

@marxxx, Thanks! Chrome 39 is pretty outdated, so it sounds like your webview is not updated to the latest version. I would check the WebView app on the Play store to make sure it is updated to the latest version: https://play.google.com/store/apps/details?id=com.google.android.webview

[jjvillavicencio]

@marxxx, Thanks! Chrome 39 is pretty outdated, so it sounds like your webview is not updated to the latest version. I would check the WebView app on the Play store to make sure it is updated to the latest version: https://play.google.com/store/apps/details?id=com.google.android.webview

The problem persist in physical device with the latest webview version

[marxxx]

@jjvillavicencio Your device is probably using integrated version of webview (mine does) and installing or updating webview package from Play Store makes no difference.

I even myself tried cordova-crosswalk-webview and it made css vars to work but there are still some problems with shadows or something (like loading conroller) since its so old.

[liamdebeasi]

Ahh that could be it. If you go into Developer Options in Settings, what are your options when selecting WebView Implementation?

[ebhsgit]

I have similar problem, on ionic 3

i use
border-top-color: var(--ion-color-primary-shade);
in app.scss file, where --ion-color-primary-shade is defined in variable.scss.

Expected to show primary color (a shade of blue), instead it is just showing black. If i replace the variable with the rgb it works correctly.

User Agent:Mozilla/5.0 (Linux; Android 6.0; Samsung Galaxy S6 Build/MRA58K; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/44.0.2403.119 Mobile Safari/537.36

Ionic:

Ionic CLI : 5.2.3
Ionic Framework : ionic-angular 3.9.2
@ionic/app-scripts : 3.2.1

Cordova:

Cordova CLI : 9.0.0 ([email protected])
Cordova Platforms : android 8.0.0
Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 3.1.2, (and 27 other plugins)

Utility:

cordova-res : not installed
native-run : 0.2.8

System:

Android SDK Tools : 26.1.1
NodeJS : v10.16.0
npm : 6.9.0
OS : Windows 10

[shadoWalker89]

Having the same issue, but with a strange behavior.
I started an ionic 4 app with this command ionic start myApp sidemenu --capacitor Didn't change any thing in the starter template.

When i first open the app i get the home page rendered correctly.
When i go the the list page and then go back to the home page (from the menu) i see that the svg is not displayed and the card background is messed up.
Now what is different is that variables are working the first time but not the second time
Also when i open chrome devtools and start opening the dom tree, when i reach the card in the dom tree suddenly without changing any thing the background go back to normal.

My phone is huawei y5 2017 mya-l22
Android version is 6.0

My ionic info are

Ionic:
  Ionic CLI                     : 5.2.5 (C:\Users\Melek\AppData\Roaming\npm\node_modules\ionic)
  Ionic Framework               : @ionic/angular 4.7.4
  @angular-devkit/build-angular : 0.801.3
  @angular-devkit/schematics    : 8.1.3
  @angular/cli                  : 8.1.3
  @ionic/angular-toolkit        : 2.0.0
Capacitor:
  Capacitor CLI   : 1.1.1
  @capacitor/core : 1.1.1
Utility:
  cordova-res : not installed
  native-run  : 0.2.8
System:
  NodeJS : v10.16.3 (C:\Program Files\nodejs\node.exe)
  npm    : 6.10.3
  OS     : Windows 10

---

EDIT : After some more trials and errors now i'm positive that my issue isn't about css variables not supported on my device but i think that the background from the menu item is leaking to the card.

I made this video to demonstrate the problem
https://www.youtube.com/watch?v=Z_qQeipYGw4

When i created a new app with the tabs starter template, i have no background problem when switching between tabs

[PatrickJung94]

I had the same issue happen over the weekend. Last Friday everything worked normally and over the weekend and monday + tuesday something updated and my android device stopped recognizing css variables or any styles applied to ionic components.

I also got the Warning "the key viewport-fit is not recognized and ignored." in the console of the device.

I noticed after checking Android System WebView that there was an update on the 18.9.2019. After installing the Update everything worked as before.

My android version is 5.1.1 on the device. Chrome version is 43.

[centogram]

Similar issues. Older android styles look/feel is off quite a bit.

[C-racker]

+1

[blinkuz]

Tener el mismo problema, pero con un comportamiento extraño.
Inicié una aplicación iónica 4 con este comando. ionic start myApp sidemenu --capacitorNo cambió nada en la plantilla de inicio.

Cuando abro la aplicación por primera vez, la página de inicio se muestra correctamente.
Cuando voy a la página de la lista y luego vuelvo a la página de inicio (desde el menú) veo que no se muestra el svg y el fondo de la tarjeta está en mal estado.
Ahora, lo que es diferente es que las variables funcionan la primera vez, pero no la segunda.
También cuando abro las herramientas de Chrome y empiezo a abrir el árbol dom, cuando alcanzo la tarjeta en el árbol dom de repente sin cambiar nada, el fondo vuelve a la normalidad .

Mi teléfono es la huawei y5 2017 mya-l22
versión de Android es6.0

Mi información iónica es

Ionic:
  Ionic CLI                     : 5.2.5 (C:\Users\Melek\AppData\Roaming\npm\node_modules\ionic)
  Ionic Framework               : @ionic/angular 4.7.4
  @angular-devkit/build-angular : 0.801.3
  @angular-devkit/schematics    : 8.1.3
  @angular/cli                  : 8.1.3
  @ionic/angular-toolkit        : 2.0.0
Capacitor:
  Capacitor CLI   : 1.1.1
  @capacitor/core : 1.1.1
Utility:
  cordova-res : not installed
  native-run  : 0.2.8
System:
  NodeJS : v10.16.3 (C:\Program Files\nodejs\node.exe)
  npm    : 6.10.3
  OS     : Windows 10

EDITAR: después de algunas pruebas y errores más, ahora estoy seguro de que mi problema no es sobre las variables CSS que no son compatibles con mi dispositivo, pero creo que el fondo del elemento del menú se está filtrando a la tarjeta.

I made this video to demonstrate the problem
https://www.youtube.com/watch?v=Z_qQeipYGw4

When i created a new app with the tabs starter template, i have no background problem when switching between tabs

Have you found any solution to that behavior? Exactly the same happens to me with the cards, the first time all styles are loaded perfectly but when I open the menu the edges and styles of the card disappear, look at the dom and when I touch any property of the card everything returns to normal.

[shadoWalker89]

@blinkuz No but a pull request https://github.com/ionic-team/ionic/pull/19602 was introduced by the ionic team member Brandy Carney as a potential fix.
I'm waiting for the next release to test it out

[blinkuz]

@blinkuz No but a pull request #19602 was introduced by the ionic team member Brandy Carney as a potential fix.
I'm waiting for the next release to test it out

I was reviewing the PR but I do not see it reflected in version 4, but in 5, have you been able to pass the change to 4?

[EinfachHans]

Any Updates? I just tested my App on an Device with Android 5.1.1 and it doesn't work at all, because of so many CSS Bugs

[SSuarezBrooktec]

We have the same problem, and on Android 5.1 ionic icons not work and ion-alert also

We are compiling using Capacitor & "@ionic/angular": "^4.11.8",

[ionic4themes]

Same here, please, any idea? We cannot use our app in Android 5 and 6 because of many CSS issues

[jbollacke]

Quickly tried adding css-vars-ponyfill in browser polyfills section of polyfills.ts:
import cssVars from 'css-vars-ponyfill'; cssVars({ watch: true });
but no luck.

Chrome/WebKit v49 introduced CSS vars and fixes most of the issues encountered.

[aminechraibi]

Any update ?

[vkyeswa]

sadly this might be ignored until android 5 is no longer supported...If you are supporting it try to avoid "heavy" design keep it "basic"

[liamdebeasi]

Hi everyone,

This issue is not so much that Android 5 and 6 are not supported, but rather older versions of the Android WebView do not support modern Web APIs. I have updated the issue title to better reflect the issue.

There are likely polyfills we could bundle with your app, but that would a) increase the size of your app and b) slow your app down. The user experience would likely be degraded as a result.

The Stencil One update was supposed to resolve most of these issues, but it looks like there are some lingering bugs. I will talk with the team to see if there is something we can do to resolve this without significantly compromising the user experience/performance of your application. Thanks!

[ThomasKientz]

@liamdebeasi The issue is precisely that Android 5 and 6 are not supported and docs is stating otherwise, that's terribly WRONG for your trust. Please correct is ASAP, as people will develop and test only on latest Android versions then will get complains about users using 5 and 6 after launch.

[liamdebeasi]

This is incorrect. We do support Android 5 and 6, but there is a small percentage of devices running versions of Android where the webview is fixed and cannot be upgraded. A majority of the devices do not have this issue. The docs likely need some clarification on this, but overall Android 5+ is supported, save a small percentage of devices.

I am going to lock this issue as we are aware of the problem and are working to find a resolution. I will post an update here when I have more to share. Thanks!

[liamdebeasi]

Hi everyone,

I wanted to provide an update regarding this. After discussion with the team, we have decided to close out this issue. However, we realize there are developers who wish to improve support for devices running older versions of the Android WebView. As a result, we have provided a workaround at the bottom of this comment.

Why is this issue happening?

Chrome added support for Custom Properties (CSS Variables) in Chrome 49 (https://caniuse.com/#search=custom%20properties). This means that versions before Chrome 49 do not have native support for CSS Variables. Polyfilling CSS Variables is tricky and imperfect which is why we do not include a polyfill by default in Ionic applications.

Does Ionic support Android 5 and 6?

Yes, there is nothing specific about these versions that prevents us from supporting Android 5 and 6. The real support is determined by the version of the Android WebView. For Android 5.0+, this webview usually autoupdates, and as a result, most users have a webview that uses the latest version of Chromium. There are a small number of devices whose vendor prevents its users from updating the webview. As a result, these users are stuck with whatever version webview shipped when the phone was made.

Our Browser Support Documentation states the Android version rather than webview version for simplicity since most of the devices running Android 5.0+ have autoupdating webviews. Additionally, Capacitor only supports Android 5.0+.

I am running into this issue, what can I do to resolve this?

For users running into this issue, they should first attempt to update their webview. The webview usually autoupdates, but in some cases it may not. To do this, users can search for "Android System Webview" on the Google Play Store, and install any updates available. For most users, this should resolve the issue.

There are some users who may still encounter issues. They likely have phones that do not have upgradable webviews. For this scenario, we recommend trying out the CSS Variables Ponyfill. There was previous discussion about this in the thread, but I was able to get it working in my Ionic application.

How do I use the CSS Variable Ponyfill?

To configure this, enable the utility once your app has been initialized:

_app.component.ts_

import { Platform } from '@ionic/angular';
import cssVars from 'css-vars-ponyfill';

...

constructor(private platform: Platform) {}

async initializeApp() {
  await this.platform.ready();

  cssVars({ watch: true });
}

In this example, we wait for Ionic to be ready before initializing the ponyfill. The ponyfill will transform CSS custom properties to static values. The watch option uses a MutationObserver to listen for any changes in the event that you do navigation. You may opt to turn this off depending on your use case.

Please note: This ponyfill may introduce a performance overhead. Only use this if you are comfortable with this tradeoff.

There are some limitations to this ponyfill. For example, you can only declare your CSS Variables on :root. Luckily, that is where we recommend customizing Ionic's default theme anyways:

_variables.scss_

:root {
  --ion-background-color: black;
  --ion-text-color: white;
  --custom-background-color: #0088cc;
}

You can also define other CSS Variables such as --custom-background-color in the example above. These can be used as you normally would:

_home.page.scss_

.my-element {
  background: var(--custom-background-color);
}

Please see our Theming Documentation for a list of CSS Variables you can customize.

This should resolve the issue for a majority of users. Beyond this there is not much else the Ionic team can do. These particular webview versions were released several years ago. For example, webview version 39 was released almost 6 years ago in September 2014. These versions lack many of the modern web APIs that we have come to appreciate. We recommend upgrading where possible to help keep pushing the modern web into the future.

Thank you!