bug: correct background on browser and emulator, but incorrect on phone

[lucasbaylon]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v7.x

Current Behavior

The background of my application is correct on browser and emulator (with Android Studio), but I have an incorrect background on phone

Expected Behavior

I should have the same background on phone as on my browser and emulator

Steps to Reproduce

1. Add the following background to the global.scss file : :root { --ion-background-color: linear-gradient(60deg, rgb(120, 86, 255) -50%, #ffbb00 100%); }
2. Build the app and generate an apk
3. Install the apk on your phone

Code Reproduction URL

https://github.com/lucasbaylon/background-issue

Ionic Info

Ionic:

Ionic CLI : 7.1.5 Ionic Framework : @ionic/angular 7.5.6 @angular-devkit/build-angular : 15.2.2 @angular-devkit/schematics : 15.2.10 @angular/cli : 15.2.10 @ionic/angular-toolkit : 8.0.0

Capacitor:

Capacitor CLI : 4.7.0 @capacitor/android : 4.7.0 @capacitor/core : 4.7.0 @capacitor/ios : not installed

Utility:

cordova-res : 0.15.4 native-run : 1.7.2

System:

NodeJS : v18.18.2 (C:\Program Files\nodejs\node.exe) npm : 9.8.1 OS : Windows 10

Additional Information

the problem is the same if I use a simple rgb value like rgb(120, 86, 255) instead of a linear gradient

I no longer have the problem if I set the background as follows: ion-content { --background: linear-gradient(60deg, rgb(120, 86, 255) -50%, #ffbb00 100%); } But I would like to use the --ion-background-color variable as it is indicated in the ionic documentation here because I don't know if it is a good thing to modify the tag

[ionitron-bot[bot]]

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please reproduce this issue in an Ionic starter application and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.

For a guide on how to create a good reproduction, see our Contributing Guide.

[lucasbaylon]

Hello @liamdebeasi

Here is the reproduction code : https://github.com/lucasbaylon/background-issue

[lucasbaylon]

Hello,

any updates ? Did you manage to reproduce the problem ?

[liamdebeasi]

I'm not able to reproduce the reported behavior. Both gradients look the same in the browser vs. a device. Does this issue happen on a physical device or only a simulator?

browser	apk

[lucasbaylon]

Hello

Sorry for not specifying, I don't have the problem on an emulator, but the problem only appears on a physical device

browser	Emulator	Physical Device

[liamdebeasi]

What version of the webview are you running on the physical device? You can find this by logging window.navigator.userAgent when inspecting the app with Chrome dev tools.

[lucasbaylon]

Here is the result of window.navigator.userAgent with Chrome dev tools on my browser : 'Mozilla/5.0 (Linux; Android 13; SM-G981B) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Mobile Safari/537.36'

[liamdebeasi]

Thanks for checking. I'm not able to reproduce this on my end. Does this issue only happen on that one device, or does it happen on multiple devices?

[lucasbaylon]

Hello,

I think I found what the problem is. It is caused by the phone's dark mode. If dark mode is activated, my background is completely black, as we can see above. If it is not activated, I have the background I chose.

I thought that the "ion-background-color" variable would change the background color regardless of the circumstances. Is there a solution to this problem ?

[liamdebeasi]

Ah thanks for mentioning you were in dark mode! I can reproduce the issue now. In global.scss your app sets --ion-background-color to the gradient. However, in theme/variables.scss your app sets --ion-background-color to a dark gray color when in dark mode which overrides the gradient.

Removing the --ion-background-color usage in theme/variables.scss should fix the issue. I am going to close this since this is an app configuration issue and not an Ionic bug.

[lucasbaylon]

It works very well now, thank you @liamdebeasi

Sorry for the inconvenience, and thank you again.

[ionitron-bot[bot]]

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.