Inconsistent background color on different devices

[agak79]

I have configured a dashboard for the mobiles devices. This how it looks like on my cellular:

However , on my wife’s cellular and on my tablet, the background color is the same in all the cards. First I thought it was the light or dark theme, but after changing it to dark, the background color didn’t change:

If I change my mobile app to light theme the background color differences appear:

On my computer everything looks as expected.

This is the part of the code I’m modifying in each card to change the colors:

type: picture-elements
image: local/overlay.svg
card_mod:
  style: |
    ha-card {
      --ha-card-background: rgba(158,93,190,0.8) !important;
      --ha-card-border-width: 0px !important;
      --ha-card-border-radius: 5px !important;
      --box-shadow: none !important;
    }   

Any idea on how to make the background color consistent between devices?

[WallyR (Wally)]

It is probably a browser optimization.
Your devices with the gradient color probably support hardware acceleration in the browser and that is why it can show the gradiants.

[agak79]

Gradient? There is no gradient in any background color, they all are plain colours.

Anyhow, I tried disabling HW acceleration in the browser of my cell phone and the colors take longer to show the colors, but the are correctly shown.

I can not check the HW acceleration in my other devices as I’m not at home now, but I think it has to be another configuration parameter.

[WallyR (Wally)]

Okay, then you just use colors that makes it look like a gradient.
Maybe some of the devices are set to show fewer colors and therefore can not show the colors close to each other as different colors.

[agak79]

Yes, that was the idea, to configure some similar colours to differentiate different rooms but maintaining the sobriety of the screen and not making it strident.

I’ll check other configurations in the other devices but I find it very strange.

[agak79]

Ok, I can now confirm is not related with HW acceleration or any other configuration of chrome. The tables has the exact same configuration chrome configurationas the phone but the colors are still different.

I checked also my screen configurations and everything seems to be ok, but anyhow the colors are pretty different in both devices…

Anybody has any idea to test?

[WallyR (Wally)]

Try to make them more distinct in colors, like blue, yellow, red, green and so on.
If they work then, then it is probably because your device is limiting the number of colors to speed up the rending of the page.

[agak79]

And now I can confirm is something related to the android app: I tried a rgba chooser on chrome and the color is perfectly shown in my tablet, while the app is showing those plain colors

[WallyR (Wally)]

Clever move!

[agak79]

Ok, following your previous advice, I changed the colours to basic ones, combinations of RGB pure

This is what I see in my phone, that is the same as in my computer

And this is from my tablet:

There is a clear difference, like a disability filter in the app but I can’t see any in the options.

[WallyR (Wally)]

I am at a loss too there.
Do you have the latest Google Web view installed?
My only guess.

[dshokouhi]

@WallyR

Do you have the latest Google Web view installed?

came here to ask this

[agak79]

Ok, some advances as now I can see the correct colours in my tablet but I don’t know yet what the cause was…

I solved it reinstalling the app. The pity is I don’t know the origin but I can try with my wife’s phone.

I was thinking that in some previous versions of this card I applied the background color in SVG file that is the reference for the whole card. I changed (but keeping the same name) it because I wanted a different tone for each card and now seeing the picture of the basic colours in the tablet, it seems like a purple filter applied, that is the colour configured in the file. Could it be? How can I reload the file in my wife’s phone to test it? Obviously if I reinstall the app the resources are download again but I want l a different method to find the reason.