Ionic 6 is using the var() CSS function which is not supported on my Android 8 device

I am using ion-list-header. It has the following style:

padding-inline-start: calc(var(–ion-safe-area-left, 0) + 16px);

But it is not supported on my Android 8 device’s WebView. Is there any workaround for this?


Screen Shot 2022-03-23 at 8.16.33 PM

Just to be sure, you have the text nested within an ion-label in that ion-list-header? I did notice in my own work that the styling is tied to a nested ion-label class

Hmmm…I would have to imagine var is supported in your version of WebView considering it is used throughout the Ionic Framework for default styling as well. It is supported as of version 50 of WebView Android (reference).

With that said, a few days ago I tried using calc and var together but couldn’t get it to work either even though it should be possible from the example here. If it wasn’t, you should be seeing all sorts of issues.

I would verify you are styling the right element as @jjdev mentioned and check DevTools to make sure it is at least showing up in the styles. You can expect an Android device connected to your computer in Chrome by going to this URL - chrome://inspect/#devices.

I examined again. It is the padding-inline-start css that is not supported on my phone’s Chrome 58.