Safari transition-opacity is broken on buttons with icons #15490
Closed
Description
Hover this button in Safari on MacOS and you will see it shift a pixel:
<button className="transition-opacity hover:opacity-80" type="button">
<svg data-name="Iconly/Curved/Profile" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5">
<path d="M11.845 21.662C8.153 21.662 5 21.088 5 18.787s3.133-4.425 6.845-4.425c3.692 0 6.845 2.1 6.845 4.4s-3.134 2.9-6.845 2.9z" data-name="Stroke 1" />
<path d="M11.837 11.174a4.372 4.372 0 10-.031 0z" data-name="Stroke 3" />
</g>
</svg>
</button>This is especially apparent on the NextUI website https://nextui.org hover any buttons with icons on them on Safari on macOS. I originally reported it as a bug with NextUI but here I have recreated it with native Tailwind.
Metadata
Assignees
Labels
No labels