search

saadeghi / daisyui

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

bug: Non-animated buttons behave strangely when active in Firefox #3202

Open alissonlauffer opened 2 months ago

alissonlauffer commented 2 months ago

What version of daisyUI are you using?

v4.12.10

Which browsers are you seeing the problem on?

Firefox

Reproduction URL

https://play.tailwindcss.com/x7S8tCPxP0

Describe your issue

Buttons without animation seem to behave strangely when centred and clicked, especially in Firefox. Chrome also seems to do this, but in an almost imperceptible way (sub-pixel text change). Below is a screencast showing this.

Screencast From 2024-09-07 16-41-00.webm

github-actions[bot] commented 2 months ago

Thank you @alissonlauffer 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.

alissonlauffer commented 2 months ago

Update: I was able to fix this by setting the --btn-focus-scale variable in the no-animation class from 1 to null. Apparently the browser engines don't interpret scale 1 as a "don't touch the scale and leave the element as it is", so the scale changes slightly.

To be honest, it makes sense, since this way, we are explicitly telling the browser engine to not touch the scale.

saadeghi commented 2 months ago

null is not a valid value, so in your case the issue goes away because browser sees an invalid CSS rule and ignores it.
I can't see the issue. Can you tell me more about your setup?

alissonlauffer commented 2 months ago

Which OS is this?

Arch Linux, most specifically running GNOME over Wayland.

Which browser version?

Latest. I'm currently running beta 131 inside a flatpak, but I was able to reproduce it in stable. I tried on my work PC running Windows and was able to reproduce a similar problem in Firefox. Removing the scale(1) rule also makes the problem disappear.

Oddly enough, on my home PC (Linux), setting the scale of my 1080p monitor to 125% (I use 100% by default) makes the problem disappear, so it seems to be a problem triggered by the browser recalculating the scale when the element isn't placed pixel-perfectly (which is why I can reproduce it when elements are centred), causing the button to drift a bit.

jlopinto commented 2 months ago

Same here, using Firefox 130.0 on window 11.