Safari transition-opacity is broken on buttons with icons

[daveycodez]

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.

[daveycodez]

Found an old fix from 2015 for a different bug in Chrome but it actually works here.

https://discourse.webflow.com/t/a-fix-for-when-your-elements-move-up-and-or-blur-during-animations-interactions-on-chrome/11629

    transform: translateZ(0);

If you add this to the button, it won't shift around on hover anymore with transition-opacity in Safari