Posted in Uncategorized

css variable issues with older versions of the android webview

   January 23, 2021  2 Comments on css variable issues with older versions of the android webview

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 (cordova-lib@8.1.1)
   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)

ionic-css-bug

Author: Fantashit

2 thoughts on “css variable issues with older versions of the android webview”

  1. 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!

  2. 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.

    rui

    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

Comments are closed.