Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

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

Open
CarlosCB1986 opened this issue Jul 28, 2024 · 1 comment
Labels
bug Something isn't working help wanted Extra attention is needed

Comments

@CarlosCB1986
Copy link

image 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.
@saicaca saicaca added bug Something isn't working help wanted Extra attention is needed labels Jul 29, 2024
@omarigg04
Copy link

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;
        ...
    }
}

# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
bug Something isn't working help wanted Extra attention is needed
Projects
None yet
Development

No branches or pull requests

3 participants