Black box around animated icons in Firefox v111
Using the Tailwind CSS Icon Plugin package, animated icons display with a black box around them in Firefox v111, while appearing correctly in other browsers like Chrome and Safari. This inconsistency affects the overall visual appeal of the project.
Steps to reproduce:
- Install this Tailwind CSS Icon Plugin package.
- Add an animated icon using provided classes (e.g.,
animate-spin). - Open in Firefox v111 and notice the black box around the icon.
- Compare with other browsers to confirm the issue is Firefox-specific.
Expected: Animated icons display consistently without artifacts.
Actual: Black box appears around animated icons in Firefox v111.
Additional info:
Firefox version: 111
OS: macOS Ventura (13.2)
Tailwind CSS version: ^3.3.1
Tailwind CSS Icon Plugin version: ^1.0.7
Please advise on any known workarounds or further information needed. Thanks!
egoist / tailwindcss-icons
Use any icon (100,000+) from Iconify, for TailwindCSS
918
Contributors get 70% of received funds after fees
How does funding with Polar work?
1
Pay now to fund the work behind this issue.
2
Get updates on progress being made.
3
Maintainer is rewarded once the issue is completed.
FAQ
Backer
You're funding impactful open source efforts
Contributor
You want to contribute to this effort
Maintainer
You want to get funding like this too