[BUG] - Switch Animation In Safari

[imchell]

Describe the bug

When trying to uncheck an animated & checked switch component, the animation looks weird.

My guess is that the left and width of StyledSwitchCircle do not update simultaneously in Safari. Similar bug also appears in some of other libs like Vuesax. If there is a animation sequence to perform width transformation first and then left transformation, like the switch in antd, maybe it can be avoided. Not sure if it's a good solution.

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

Click any animated & checked switch in Safari.

Expected behavior

The animation should be fluent.

Screenshots or Videos

Operating System Version

macOS

Browser

Safari

[imchell]

A bug when shadow = {true}

[jrgarciadev]

Hey @imchell 👋🏼, thanks for reporting it!