daisyui icon indicating copy to clipboard operation
daisyui copied to clipboard
verified publisher icon saadeghi

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

Open yunik1004 opened this issue 2 years ago • 5 comments

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

yunik1004 avatar Dec 21 '23 02:12 yunik1004

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.

github-actions[bot] avatar Dec 21 '23 02:12 github-actions[bot]

Firefox on MacOS does not have this issue.

yunik1004 avatar Dec 21 '23 02:12 yunik1004

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?
Screenshot 2023-12-21 at 6 19 20 AM

saadeghi avatar Dec 21 '23 03:12 saadeghi

  1. My Windows computer is a desktop without any touchscreen device. Also, my Android device is a typical smartphone (Samsung Galaxy A52)
  2. 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);
}

yunik1004 avatar Dec 21 '23 06:12 yunik1004

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

GODrums avatar Dec 24 '23 17:12 GODrums