Bonjour une petite question pour un problème récurrent chez moi et dont je ne trouve pas de solution.

Si j'applique une transition sur une opacity par exemple comment faire pour que la transition ne se fasse pas entre les valeurs par défaut du navigateur et les miennes ? Je m'explique.

J'ai un paragraphe avec une opacité à 0 et je veux la passer à 1 avec une transition je fais donc :

p  {
 opacity: 0;
 transition: opacity 1s;

 &:hover {
  opacity: 1;
 }
}

Le problème si je fais un F5 je vois une première transition parasite entre la valeur par défaut des navigateurs qui est une opacité à 1 et ma valeur à 0.

Le truc trop louche c'est que ce bug est toujours lié au formulaire enfin plus précisément les input et textaera si je les commentes le bug disparaît en sachant que la transition n'a rien avoir avec formulaire mais ce problème de transition parasite n'est pas nouveau j'avais déjà laissé un message sur ce forum et on m'avait donné une solution bricolage (mettre le code concerné par le bug in-line plutôt que dans un CSS externe ça fonctionne mais ce n'est pas une solution optimale).

Navigateur testés : Firefox, Chrome, Opera, Edge, Internet Explorer

J'espère avoir été suffisamment clair n'hésité pas à donner votre avis et à demander des précisions si je n'ai pas été assez clair.

Merci d'avance pour vos avis !!!

-
Edité par Mamashi 24 mai 2017 à 16:38:38

Salut,

C'est un bug connu de Chrome, qu'ils n'ont apparemment pas prévu de corriger pour l'instant. Je suis étonné que ça le fasse dans Firefox, par contre.

Bref, le bugfix le plus simple est d'ajouter une balise script avec un espace dedans, à la fin de ton body.

        <script> </script>
    </body>
</html>

rhooManu a écrit:

Salut,

C'est un bug connu de Chrome, qu'ils n'ont apparemment pas prévu de corriger pour l'instant. Je suis étonné que ça le fasse dans Firefox, par contre.

Bref, le bugfix le plus simple est d'ajouter une balise script avec un espace dedans, à la fin de ton body.

        <script> </script>
    </body>
</html>

Salut merci de ta réponse le bug dans firefox est une hallucination de ma part désolé. Oui je connaissais cette solution ainsi que celle de mettre le css problématique in-line. Je ne comprend juste pas qu'un bug aussi basique et assez contraignant sois tout simplement ignoré par Google. J’espérais juste que quelqu’un me dise qu'un fix digne de ce nom existait. En tout cas merci je mets en résolu faute de mieux ^^.

Pour ce que ça intéresse le bug est causé par les inputs des formulaires et créé une transition parasite entre les valeurs définit par le développeur et les valeurs par défauts de Google Chrome que vous voyez dans le Google DevTool comme "user-agent defaults".

Voici un exemple de ce bug : https://lab.laukstein.com/bug/input