[Résolu] Animations inactives sur SAFARI

bonjour,
J'ai réussi, enfin quand je dis moi, je veux dire gcyrillus
à faire des animations de textes sur ma page. Ci-dessous le jsfiddle de gcyrillus :
https://jsfiddle.net/d8fzt46q/1/
Mais cela ne fonctionne pas sur SAFARI
Est-il possible de rendre ces lignes de codes compatibles ?
Merci beaucoup, bon week-end,
P.

Bonjour,

qu'est-ce qui ne fonctionne pas ?
* l'animation sur text-indent
* les ombrages ? (ressemblerait à ton premier sujet)
* la rotation ?

Je ne dispose pas de Safari, donc impossible pour moi de voir le soucis en live.

Cdt

Bonjour gcyrillus
Il n'y a pas d'animation. L'image est figée
Pour ce qui est de firefox, la font-size est plus petite (texte horizontal) et le line-height délirant (texte vertical) contrairement à Chrome (où tout est nickel).
Tout était pourtant bien parti. Encore merci

Le texte vertical n'est plus responsive et est complètement à droite. On l'aperçoit tout juste. La typo est masquée si on redimensionne la fenêtre

D'après caiuse, rotate fonctionne avec Safari à partir de la version 14,5. Un petit tour sur caiuse est toujours le bienvenu.
https://caniuse.com/?search=rotate
Est-là le problème ?
Je viens de tester ton code sur iOS15, rien ne bouge. Sur un SAMSUNG Galaxy S6 et Chrome, ça fonctionne.

Bonjour Bongota,
J'ai Safari version 16
Et sur Chrome, le résultat est TOP.
Tout est décalé sur Firefox.
Sur Safari, tout est bien calé... mais rien ne bouge
Merci pour tes tests

rebonjour,

Dans mon Firefox cela fonctionne parfaitement, mais ce n'est pas une version pour la pomme.

Dans safari, regardes si en en ajoutant en fin de l'animation :

  to {
    text-indent: 0
  }

suffit à faire décoller l'animation. test https://jsfiddle.net/xb3ywht2/ inclus rotate repasser en transform:rotate();

Autre test à faire dans l'animation pour vérifier que la variable CSS n'est pas en cause:
remplacer

text-indent: calc(var(--offsetText) * -1px - 0.5em);

par

text-indent: -20em;/* valeur arbitraire pour test */

peut-être en lien avec un vieux bug : https://bugs.webkit.org/show_bug.cgi?id=161002

Cdt
Modifié par gcyrillus (05 Nov 2022 - 15:05)

ça bouge sur le Safari pour la pomme
Gros problème d'interlettrage/d'approche/d'ombré. Les mots sont les uns sur les autres.
J'ai cherché ou changer ça... pas trouvé
Mais ça bouge...

avec :

text-indent: -20em;/* valeur arbitraire pour test */

Je tente de manipuler le code (text-indent) mais ce ne doit pas être ça
Je suis dessus depuis un moment
Toujours ce soucis avec l'ombrage
Bonne soirée,
P.

hmmm, bon cela ressemble bien à ce vieux bug de safari, calc(var(--var)) ne fonctionne pas apparemment. Reste à reduire la partie CSS et cloner le texte via js :
test ceci : <del>https://jsfiddle.net/ufktr54p/</del> https://jsfiddle.net/5r61p8oa/1/
Modifié par gcyrillus (06 Nov 2022 - 16:05)

Bonjour gcyrillus
Cela ne fonctionne toujours pas sur Safari.
Existe t-il un autre moyen ?
Encore une fois, sur Safari, le texte (statique, et avec text-indent: -20em) est parfaitement calé.
Désolé de t'embêter
Merci.

Je n'arrive pas à adapter ton code bien trop complexe pour moi
C'était pour Firefox ?
Puis-je mettre ma page épurée en ligne ?
Pour Safari, ça ne fonctionne pas. Pas grave, je le mentionnerais lors de l'intro
Merci pour ton temps et tes compétences
Modifié par PLGPPUR (06 Nov 2022 - 16:52)

Bonjour gcyrillus,
J'ai mis les animations en ligne :
https://lecomptearebours.fr/gcyrillus/index.html
Peut-on arranger les choses pour Firefox ?
Merci beaucoup et bonne journée,
P.

chez moi çà fonctionne dans safari, brave, firefox
le mot "rock" en boucle, rien d'autre


Mais 500 lignes de code pour çà !!!

une trentaine devrait suffire et rien qu'en css.

Bonjour drphilgood,
la page est épurée niveau html, j'ai laissé le reste
Tu es sur PC, n'est ce pas ? Je suis sur Mac
Pour Firefox, le ROCK vertical est bien placé ?
Merci et bonne journée,
P.
Modifié par PLGPPUR (07 Nov 2022 - 09:38)

je suis sur mac/ventura

je ne vois que "ROCK"


Modifié par drphilgood (07 Nov 2022 - 09:56)

dans chrome même chose l'anim fonctionne et rien d'autre
dans opera c'est saccadé et chagement de couleur