quasar
quasar copied to clipboard
Radial-Gradient background seems to override dark config on mobile
What happened?
I'm still pretty new to front end so if this is user error then I apologize. I have a page with a radial-gradient background, and I've set the dark mode using the quasar config as described in the dark plugin page. On my desktop (firefox) when I add a q-select it's shown in dark mode, but when I run it in iphone 11 safari with the radial-gradient it flashbangs you with a white background. I'm not sure how it's related to the gradient but when I toggle that part of the css and use the default background it doesn't have the same issue.
What did you expect to happen?
I would expect iphone 11 safari to be the same as the desktop experience where the select respects the dark config setting and keeps the background
Reproduction URL
https://codepen.io/gloomcloud/pen/VwRWXjO
How to reproduce?
- Go to codepen link
- I personally toggled the developer design mode and selected iPhone 11 Pro iOS 14.6 to repro it
- Refresh
- Click either dropdown
- Change design mode back to desktop / refresh / confirm normal behavior
- Comment the background line in the css to confirm that affects the mobile behavior
Flavour
Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)
Areas
Plugins (quasar), Style & Identity (quasar)
Platforms/Browsers
Safari, iOS, Android
Quasar info output
No response
Relevant log output
No response
Additional context
No response