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

[alissonlauffer]

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]

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]

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]

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?

• Which OS is this?
• Which browser version?

[alissonlauffer]

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]

Same here, using Firefox 130.0 on window 11.