search

saadeghi / daisyui

🌼 🌼 🌼 🌼 🌼  The most popular, free and open-source Tailwind CSS component library
https://daisyui.com
MIT License
34.27k stars 1.31k forks source link

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

Closed duc-hoang-161 closed 9 months ago

duc-hoang-161 commented 10 months ago

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.

Screenshot 2024-01-24 at 10 18 38 AM Screenshot 2024-01-24 at 10 19 30 AM

github-actions[bot] commented 10 months ago

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 commented 10 months ago

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