@keyframes ne fonctionne pas sur Safari

Peut-être faire un tour içi et vérifier la compatibilité:
http://caniuse.com/#search=CSS3%20Animation

allan00958 a écrit :
Peut-être faire un tour içi et vérifier la compatibilité:
http://caniuse.com/#search=CSS3%20Animation

@keyframes est compatible sur tous les navigateurs depuis IE11, ce n'est pas le problème.

Bonjour,

Quelle version de Safari et sur quelle support (PC, Tablette, Telephone) ?

_laurent a écrit :
Bonjour,
Quelle version de Safari et sur quelle support (PC, Tablette, Telephone) ?

Bonjour, voici quelques suppléments d'informations:
La @keyframes fonctionne partiellement. Avec le même code, le résultat est différent sur Chrome et Safari dernière version.

Sur le screenshot ci-dessus, le résultat du haut est le rendu sur Chrome, et juste en dessous le rendu sur Safari. On voit clairement que le positionnement est différent. Le but serait que la barre rouge soit positionnée à 64px du haut.

Pourquoi 64 px ? Il faut simplement imaginer qu'il y aura (dans mon projet) un header positionné lui aussi en fixed et collé en haut de page, qui fera une hauteur de 64px. Il faudrait donc que cette barre rouge soit à 64px du top pour être juste en dessous du header.

Malgré un top: 64px; position: fixed dans ma @keyframes, la barre rouge est mal positionnée dans les 2 cas. Voici un codepen à jour qui illustre parfaitement le problème. https://codepen.io/anon/pen/KvPKbB

Je ne comprends pas pourquoi l'interprétation d'un "top: 64px" est différent sur les 2 navigateurs étant donné que la règle est très basique.

Est-ce que vous y comprenez quelque chose ?

Merci.
Modifié par lorraineS (21 Jul 2017 - 14:46)

Mmmmh.... tu as des soucis de positionnement... c'est un peu le bordel dans ton CSS tout est en absolute de partout, c'est pas super simple...
Mais surtout il y a ça :

.hero-carousel__nav {
    bottom: 20%;
    transform: translateY(-20%);
}

Tu positionnes un truc par défaut en bottom et tu lui mets un translate par dessus. Au passage, le translate se réfère à sa propre taille, pas à celle de la page. donc le 20% du bottom et le 20% du translate ne font aaaaaabsoluement pas la même taille (et du coup ça crée un décalage de quelques px). En plus le bottom et le top doivent rentrer en conflit, il faudrait que tu positionnes tout par rapport au même ou alors que tu repasse bottom à "auto".

Et sinon tes keyframes sont vraiement chelou... pourquoi tu as besoin de toutes ces étapes ? Il faut juste que tu fasses glisser le menu en haut de la page non ?
Normalement il suffit de le positionner ton menu en fixed à top:-100px; par exemple et tu lui met une transition sur le top. Dès que tu scroll tu lui colle une class "show" qui le fait passer à top:64px; et hop c'est tout.

Bon pour arriver à quelque-chose de bien il va falloir que tu quiches lorraineS !
Modifié par _laurent (21 Jul 2017 - 15:48)

Merci pour ta réponse _laurant. En effet, c'est un peu bordélique. En fait la @keyframes sert à faire passer la navigation vers le haut avec une légère transition ainsi qu'une perte d'opacité (ainsi qu'une réapparition sur la fin complète sur la fin). Le fait d'ajouter une class .show comme tu le propose ne fera pas cette effet de transition vers le haut.

.show {
 position: fixed;
 top: 64px;
}

Avec le code ci-dessus, dès l'ajout de la classe, mon menu se placera immédiatement à 64px du top. Je perdrai donc cet effet de transition vers le haut ma navigation, ce que je ne souhaite pas.

J'ai opté pour une @keyframes juste à cause de ça...
Modifié par lorraineS (21 Jul 2017 - 16:19)

_laurent a écrit :
C'est pour ca que je te suggérait d'utiliser une transition plutôt qu'une animation
https://www.w3schools.com/css/css3_transitions.asp
C'est vachement plus simple quand on a seulement 2 états.
il suffit de rajouter transition: top 2s; sur ta classe de base et hop c’est magique
Les animations sont faites pour avoir des trucs vachement plus complexe.

En fait, la transition doit se faire sur une très courte distance (par exemple passer de bottom: 20% à bottom: 23%). Ensuite, la navigation doit disparaitre totalement et réapparaitre comme elle le fait actuellement, en passant derrière le menu (bon sur le Codepen il n'y est pas, mais il faut se l'imaginer..), comme si elle venait du haut vers le bas alors qu'en réalité c'est le même composant qui est "trimbalé" dans tous les sens.

Une simple transition comme tu me le conseilles ne me permettra pas (à ma connaissance) d'avoir autant de complexité et des changements d'état à un moment donné.
Modifié par lorraineS (21 Jul 2017 - 16:32)

Ha oui je viens de voir ça. Je n'avais pas remarqué. C'est assez compliqué du coup effectivement

J'ai tendance a préférer utiliser deux menus pour faire ça (un par défaut qui ne bouge pas de la page et un autre flotant)...

Sinon ton soucis initial est toujours là ? je pense que ca viens de ce melange entre bottom/top/translate et tout en %...

Pour placer ton menu de base tu as juste besoin de le mettre en absolute top:0; par rapport à son parent. Et au scrool tu pourras le faire disparaitre pusi le placer en fixed et le faire réapparaître toujours avec le top.

J'ai un peu nettoyé le codepen et j'ai aussi ajouté le header de 64px, ce sera beaucoup plus parlant je pense, le voici : https://codepen.io/anon/pen/KvPKbB

Après avoir un peu scroll, le header blanc de 64px se met en place et l'animation se déclenche. La sous-navigation rouge apparait du haut vers le bas après 3secondes. L'effet fonctionne bien, sur chrome uniquement.

Sur Safari la @keyframes se lance correctement, le texte de navigation à bien un effet de transition vers le haut et son opacité passe de 1 à 0. Normal jusqu'ici. Par contre la navigation rouge vient se positionner derrière la navigation blanche, comme si l'interprétation du top: 64px sur Safari était différente.

Et c'est ce détail que je ne comprends pas. J'y suis depuis 3 jours et impossible de trouver la cause.

En fait je viens d'essayer avec une VM d'IE11, le résultat est identique à Safari. Voir capture ci-jointe (on peut voir très légèrement un début de la navigation rouge sous la blanche).

La cause doit-être identique j'imagine (j'éspère)
Modifié par lorraineS (21 Jul 2017 - 17:19)

En effet, très étrange... je vais garder ta solution et adapter mon code en conséquence.

Un gros mystère donc.

Merci beaucoup _laurent
Modifié par lorraineS (21 Jul 2017 - 21:30)