New button animations cause LightDarkSwitch and Theme Color panel icons to shake on Hover in Safari

[CarlosCB1986]

As stated in the title, after adding the animations in this commit https://github.com/saicaca/fuwari/commit/02865aa76e37bea9aa357675df5592c705f16428 these two icons have a weird movement behavior when hovering over them in Safari. In Chrome I have not observed this behavior. This problem does not arise on buttons which have the animation but only text, only in the buttons with svgs.

[omarigg04]

Hola, en efecto hay un problema, después de agregar las animaciones de botones, los íconos de LightDarkSwitch y el panel de selección de color en Safari tienen un comportamiento extraño al pasar el cursor sobre ellos. En Chrome, este comportamiento no se observa. El problema no aparece en botones que solo tienen texto, sino únicamente en los que tienen SVGs.

Para resolverlo, podrías probar las siguientes sugerencias:

Revisar las propiedades de transformación: Asegúrate de que las animaciones de transformación (como scale) no interfieran con los SVGs en Safari. Puede ser útil especificar transform-origin y transform-style.

Revisar propiedades de animación: Safari a veces maneja las transiciones y animaciones de manera diferente. Asegúrate de que las propiedades de animación sean compatibles con Safari.

Evitar animaciones en SVGs: Como solución temporal, podrías desactivar las animaciones en los botones que contienen SVGs para Safari usando media queries específicas o condicionales en JavaScript.

Añadir will-change: transform a las clases scale-animation:

&.scale-animation {
    will-change: transform;
    ...
}

Usar prefijos específicos para Safari:

@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
    &.scale-animation {
        @apply before:scale-100 before:opacity-100;
        ...
    }
}