Matronix.fr Le blog d'un prof de primaire
Je sais pas pourquoi je peux pas commenter mais pour répondre au commentaire #1 : ça marche partout, et c’est valide CSS. C’est donc Safari qui marc…
Source : Material Design Button “ripple” effect animation (pure CSS) — Le Hollandais Volant
Chez moi ça ne marche ni avec Safari, ni avec Firefox, ni avec Firefox Nightly, ça ne marche qu’avec Chrome.
Fonctionne très bien sous Firefox Linux et Windows pour ma part.
Mais Safari ne semble pas supporter la fonction “Ripple”
« Ripple » n’est pas une fonction native de CSS : c’est le codeur qui déclare ça avec le CSS « Keyframes ».
J’aurais pu appeler ça comme je veux. Ça fait partie des CSS3.
Ici ça marche sous Firefox, Nightly, Vivaldi et Chromium, y compris Firefox et Nightly mobile. Ça marche partout où je test, en fait.
Excepté Safari (qui semble clairement avoir un soucis), ça ne viendrait pas d’un bloqueur de scripts ou de pub ou d’une autre extension (qui bloque les animations, les gif, le flash, par exemple) ?
J’ai essayé en désactivant tout, ça ne change rien.
Par contre le même Firefox, avec bloqueur, sous Windows, ça marche.
Ça semble plus être le Mac le problème en fait, peut être des appels d’API ? Chrome a tendance a tout empacter lui même, ce qui pourrait expliquer que ça fonctionne.
C’est bien étrange tout ça, mais si tous les problèmes sont sous Mac, le problème peut venir de ça (même si je trouve ça bizarre tout de même).
J’investiguerai avec une machine virtuelle à l’occasion.
Ah bah oui exact, j’ai pas regarder le code correctement… J’ai raté le @keyframes.
En effet, bizarre dans ce cas pour Safari, le code est vraiment du basique CSS3…