28172 sujets

CSS et mise en forme, CSS3

Bonsoir,

J'ai un problème avec une animation sur Safari. En effet, celle-ci fonctionne parfaitement sur Chrome et Firefox mais partiellement sur IE11 et pas du tout sur Safari.

Voici un codepen pour voir mon problème en action: https://codepen.io/anon/pen/MoMgwv

@keyframes menu {
      0% {
        opacity: 1; }

      20% {
        opacity: 0;
        text-shadow: 0 0 5px rgba(0, 0, 0, .5);
        top: 85%; }

      70% {
        background-color: $color2;
        box-shadow: 3px 0 7px rgba(0, 0, 0, .08);
        height: 40px;
        opacity: 0;
        position: fixed;
        top: 0; }

      100% {
        background-color: $color2;
        box-shadow: 3px 0 7px rgba(0, 0, 0, .08);
        height: 40px;
        opacity: 1;
        position: fixed;
        top: 35px; }
    }


Les animations (@keyframes) sont de la ligne 22 à la ligne 46. Puis, ligne 49-50, l'animation est "appelée":
animation: menu .75s ease-out;
animation-fill-mode: forwards;


Le forwards est obligatoire pour garder le dernier état de l'animation (le position: fixed ainsi que le top: 34px).

Le problème c'est que Safari à l'air d'ignorer partiellement le forwards puisqu'il ne reste pas fixer en haut de page MAIS le "top" est plus ou moins pris en compte. Vous pouvez le vérifier en augmentant la propriété top à 200. La barre de navigation sera visible mais ne restera pas fixé au top lors du scroll.

Ce n'est pas un problème de préfix étant donné que j'utilise autoprefixer. J'ai aussi essayer la syntaxe longue au cas où, mais même Chome ne sais plus s'y retrouver avec celle-ci.

Quelqu'un aurait une idée du problème ?

Merci beaucoup.
Modifié par lorraineS (18 Jul 2017 - 22:31)
upload/1500641173-65092-capturedaeacran2017-07-21aa14.png
_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)
Modérateur
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. Smiley smile

Bon pour arriver à quelque-chose de bien il va falloir que tu quiches lorraineS ! Smiley lol
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... Smiley langue
Modifié par lorraineS (21 Jul 2017 - 16:19)
Modérateur
C'est pour ca que je te suggérait d'utiliser une transition plutôt qu'une animation Smiley smile
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 Smiley smile
Les animations sont faites pour avoir des trucs vachement plus complexe.
_laurent a écrit :
C'est pour ca que je te suggérait d'utiliser une transition plutôt qu'une animation Smiley smile
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 Smiley smile
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)
Modérateur
Ha oui je viens de voir ça. Je n'avais pas remarqué. C'est assez compliqué du coup effectivement Smiley biggrin

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. Smiley biggol
Modérateur
Effectivement c'est plus propre Smiley lol mais je ne vois pas d'ou ca peut venir... et étant sur Windows je n'ai pas de version valable de Safari pour tester..... désolé....
upload/1500650375-65092-capturedaeacran2017-07-21aa17.png 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) Smiley lol
Modifié par lorraineS (21 Jul 2017 - 17:19)
Modérateur
Bon bah de ce que j'ai pu voir il galere a maintenir le position fixed en forward.
line 94 quand je remplace absolute par fixed ca marche bien.
.hero-carousel__nav {
  position: fixed;
  top: 85%;
  width: 100%;
}
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 Smiley cligne
Modifié par lorraineS (21 Jul 2017 - 21:30)