bug: Hero with overlay image - bg-opacity-[number] is not working properly on Android phone

[duc-hoang-161]

What version of daisyUI are you using?

4.6.0

Which browsers are you seeing the problem on?

Chrome Android

Reproduction URL

https://daisyui.com/components/hero/#hero-with-overlay-image

Describe your issue

Chrome Android: v103 Root cause: oklch is not supported. oklch doc Suggestion: Use opacity-[number] instead of bg-opacity-[number]

I'm using the component Hero with overlay image in my project and noticing a weird bug on an Android phone when the overlay seems solid even though it can see through on other browsers (Desktop, iPhone). I made a quick fix on the browser by applying opacity to the overlay element and it worked.

[github-actions[bot]]

Thank you @duc-hoang-161 for reporting issues. It helps daisyUI a lot 💚
I'll be working on issues one by one. I will help with this one as soon as a I find a solution.
In the meantime providing more details and reproduction links would be helpful.

[duc-hoang-161]

A related issue https://github.com/saadeghi/daisyui/issues/2703