bug: Hover styles are not working on Firefox (Windows & Android)

yunik1004 commented 6 months ago

What version of daisyUI are you using?

v4.4.20

Which browsers are you seeing the problem on?

Firefox

Reproduction URL

https://daisyui.com/components/button/

Describe your issue

Hover styles on buttons with brand colors are not working. I'm using Firefox 121.0 on Windows 10 and 120.1.1 on Android 13. I also found that daisyui v2.52.0 works correctly, but v3.x and v4.x have this bug. Related to: #2398

https://github.com/saadeghi/daisyui/assets/20185342/36705ef4-6106-49f7-908e-90fe95f94a7b

github-actions[bot] commented 6 months ago

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

yunik1004 commented 6 months ago

Firefox on MacOS does not have this issue.

saadeghi commented 6 months ago

I don't see this issue on MacOS Firefox either, but I don't have a Windows to test on that.

Is this a touchscreen device (tablet, etc.) or a mouse + keyboard device?
Can you check which style is getting applied on hover?

yunik1004 commented 6 months ago

My Windows computer is a desktop without any touchscreen device. Also, my Android device is a typical smartphone (Samsung Galaxy A52)

I cannot see any difference in the applied styles whether I check the ':hover' checkbox or not.. Below one are the styles of the ghost button when I check the ':hover'.

.btn-ghost {
border-width: 1px;
border-color: transparent;
background-color: transparent;
color: currentColor;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);
outline-color: currentColor;
}
.btn {
display: inline-flex;
height: 3rem;
min-height: 3rem;
flex-shrink: 0;
cursor: pointer;
-webkit-user-select: none;
user-select: none;
flex-wrap: wrap;
align-items: center;
justify-content: center;
border-radius: var(--rounded-btn,.5rem);
border-color: transparent;
border-color: oklch(var(--btn-color,var(--b2))/var(--tw-border-opacity));
padding-left: 1rem;
padding-right: 1rem;
text-align: center;
font-size: .875rem;
line-height: 1em;
gap: .5rem;
font-weight: 600;
text-decoration-line: none;
transition-duration: .2s;
transition-timing-function: cubic-bezier(0,0,.2,1);
border-width: var(--border-btn,1px);
animation: button-pop var(--animation-btn,.25s) ease-out;
transition-property: color,background-color,border-color,opacity,box-shadow,transform;
--tw-text-opacity: 1;
color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);
--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);
outline-color: var(--fallback-bc,oklch(var(--bc)/1));
background-color: oklch(var(--btn-color,var(--b2))/var(--tw-bg-opacity));
--tw-bg-opacity: 1;
--tw-border-opacity: 1;
}
button, [role="button"] {
cursor: pointer;
}
button, [type="button"], [type="reset"], [type="submit"] {
-webkit-appearance: button;
background-color: transparent;
background-image: none;
}
button, select {
text-transform: none;
}
button, input, optgroup, select, textarea {
font-family: inherit;
font-feature-settings: inherit;
font-variation-settings: inherit;
font-size: 100%;
font-weight: inherit;
line-height: inherit;
color: inherit;
margin: 0;
padding: 0;
padding-right: 0px;
padding-left: 0px;
}
*, ::before, ::after {
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-pan-x: ;
--tw-pan-y: ;
--tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity;
--tw-gradient-from-position: ;
--tw-gradient-via-position: ;
--tw-gradient-to-position: ;
--tw-ordinal: ;
--tw-slashed-zero: ;
--tw-numeric-figure: ;
--tw-numeric-spacing: ;
--tw-numeric-fraction: ;
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / .5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--tw-blur: ;
--tw-brightness: ;
--tw-contrast: ;
--tw-grayscale: ;
--tw-hue-rotate: ;
--tw-invert: ;
--tw-saturate: ;
--tw-sepia: ;
--tw-drop-shadow: ;
--tw-backdrop-blur: ;
--tw-backdrop-brightness: ;
--tw-backdrop-contrast: ;
--tw-backdrop-grayscale: ;
--tw-backdrop-hue-rotate: ;
--tw-backdrop-invert: ;
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia: ;
}
*, ::before, ::after {
box-sizing: border-box;
border-width: 0;
border-style: solid;
border-color: #e5e7eb;
}
.bg-base-100 {
--tw-bg-opacity: 1;
}
.border-base-300 {
--tw-border-opacity: 1;
}
.bg-base-300 {
--tw-bg-opacity: 1;
}
.text-base-content {
--tw-text-opacity: 1;
color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
}
:root .prose {
--tw-prose-body: var(--fallback-bc,oklch(var(--bc)/.8));
--tw-prose-headings: var(--fallback-bc,oklch(var(--bc)/1));
--tw-prose-lead: var(--fallback-bc,oklch(var(--bc)/1));
--tw-prose-links: var(--fallback-bc,oklch(var(--bc)/1));
--tw-prose-bold: var(--fallback-bc,oklch(var(--bc)/1));
--tw-prose-counters: var(--fallback-bc,oklch(var(--bc)/1));
--tw-prose-bullets: var(--fallback-bc,oklch(var(--bc)/.5));
--tw-prose-hr: var(--fallback-bc,oklch(var(--bc)/.2));
--tw-prose-quotes: var(--fallback-bc,oklch(var(--bc)/1));
--tw-prose-quote-borders: var(--fallback-bc,oklch(var(--bc)/.2));
--tw-prose-captions: var(--fallback-bc,oklch(var(--bc)/.5));
--tw-prose-code: var(--fallback-bc,oklch(var(--bc)/1));
--tw-prose-pre-code: var(--fallback-nc,oklch(var(--nc)/1));
--tw-prose-pre-bg: var(--fallback-n,oklch(var(--n)/1));
--tw-prose-th-borders: var(--fallback-bc,oklch(var(--bc)/.5));
--tw-prose-td-borders: var(--fallback-bc,oklch(var(--bc)/.2));
}
@media (min-width: 768px) {
.md\:prose-base {
font-size: 1rem;
line-height: 1.75;
}
}
.prose-sm {
font-size: .875rem;
line-height: 1.7142857;
}
.prose {
--tw-prose-body: #374151;
--tw-prose-headings: #111827;
--tw-prose-lead: #4b5563;
--tw-prose-links: #111827;
--tw-prose-bold: #111827;
--tw-prose-counters: #6b7280;
--tw-prose-bullets: #d1d5db;
--tw-prose-hr: #e5e7eb;
--tw-prose-quotes: #111827;
--tw-prose-quote-borders: #e5e7eb;
--tw-prose-captions: #6b7280;
--tw-prose-kbd: #111827;
--tw-prose-kbd-shadows: 17 24 39;
--tw-prose-code: #111827;
--tw-prose-pre-code: #e5e7eb;
--tw-prose-pre-bg: #1f2937;
--tw-prose-th-borders: #d1d5db;
--tw-prose-td-borders: #e5e7eb;
--tw-prose-invert-body: #d1d5db;
--tw-prose-invert-headings: #fff;
--tw-prose-invert-lead: #9ca3af;
--tw-prose-invert-links: #fff;
--tw-prose-invert-bold: #fff;
--tw-prose-invert-counters: #9ca3af;
--tw-prose-invert-bullets: #4b5563;
--tw-prose-invert-hr: #374151;
--tw-prose-invert-quotes: #f3f4f6;
--tw-prose-invert-quote-borders: #374151;
--tw-prose-invert-captions: #9ca3af;
--tw-prose-invert-kbd: #fff;
--tw-prose-invert-kbd-shadows: 255 255 255;
--tw-prose-invert-code: #fff;
--tw-prose-invert-pre-code: #d1d5db;
--tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);
--tw-prose-invert-th-borders: #4b5563;
--tw-prose-invert-td-borders: #374151;
font-size: 1rem;
line-height: 1.75;
}
.prose {
color: var(--tw-prose-body);
}
body {
line-height: inherit;
}
[data-theme="light"] {
color-scheme: light;
--in: .7206 .191 231.6;
--su: 64.8% .15 160;
--wa: .8471 .199 83.87;
--er: .7176 .221 22.18;
--pc: .89824 .06192 275.75;
--ac: .15352 .0368 183.61;
--inc: 0 0 0;
--suc: 0 0 0;
--wac: 0 0 0;
--erc: 0 0 0;
--rounded-box: 1rem;
--rounded-btn: .5rem;
--rounded-badge: 1.9rem;
--animation-btn: .25s;
--animation-input: .2s;
--btn-focus-scale: .95;
--border-btn: 1px;
--tab-border: 1px;
--tab-radius: .5rem;
--p: .4912 .3096 275.75;
--s: .6971 .329 342.55;
--sc: .9871 .0106 342.55;
--a: .7676 .184 183.61;
--n: .321785 .02476 255.701624;
--nc: .894994 .011585 252.096176;
--b1: 1 0 0;
--b2: .961151 0 0;
--b3: .924169 .00108 197.137559;
--bc: .278078 .029596 256.847952;
}
:root {
color-scheme: light;
--in: .7206 .191 231.6;
--su: 64.8% .15 160;
--wa: .8471 .199 83.87;
--er: .7176 .221 22.18;
--pc: .89824 .06192 275.75;
--ac: .15352 .0368 183.61;
--inc: 0 0 0;
--suc: 0 0 0;
--wac: 0 0 0;
--erc: 0 0 0;
--rounded-box: 1rem;
--rounded-btn: .5rem;
--rounded-badge: 1.9rem;
--animation-btn: .25s;
--animation-input: .2s;
--btn-focus-scale: .95;
--border-btn: 1px;
--tab-border: 1px;
--tab-radius: .5rem;
--p: .4912 .3096 275.75;
--s: .6971 .329 342.55;
--sc: .9871 .0106 342.55;
--a: .7676 .184 183.61;
--n: .321785 .02476 255.701624;
--nc: .894994 .011585 252.096176;
--b1: 1 0 0;
--b2: .961151 0 0;
--b3: .924169 .00108 197.137559;
--bc: .278078 .029596 256.847952;
}
:root, [data-theme] {
color: var(--fallback-bc,oklch(var(--bc)/1));
}
html {
line-height: 1.5;
-webkit-text-size-adjust: 100%;
tab-size: 4;
font-family: ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Vazirmatn,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
font-feature-settings: normal;
font-variation-settings: normal;
}
0% {
transform: scale(var(--btn-focus-scale,.98));
}
40% {
transform: scale(1.02);
}
100% {
transform: scale(1);
}

GODrums commented 6 months ago

I am using Firefox 121.0 on Windows 11 (mouse + keyboard) and can confirm this issue as well. All hover-styles (screenshot is from Chrome) are completely missing in Firefox ( -> on hover no additional styles are applied at all): Screenshot 2023-12-24 183622

For testing purposes: adding these missing styles manually (inline) makes it look as intended again. Screenshot 2023-12-24 183551

saadeghi / daisyui