Discussion :

[mamashi]

Les codes sont données en guise d'exemple et ont été écris à la main dans le sujet donc les erreurs de syntaxe ne sont pas importantes

Bonjour,

Dans mon code HTML j'ai un bouton (qui est simplement une Div : ce n'est pas important c'est pour l'exemple) :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
// HTML
<div id="unique"></div> // Création de mon bouton

Dans le CSS je déclare la taille de ma DIV sa couleur de base ainsi que son comportement pendant le survol (:hover)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
#unique {
    width: 500px; // La largeur de ma div
    height: 250px; // La hauteur de ma div
    background-color: blue; // La couleur de fond de la div (bleu)
    transition: background-color 2s; // la transition pour le changement de couleur de fond   
}
#unique:hover {
    background-color: red; // nouvelle couleur de fond pendant le survol
}

Ce code fonctionne correctement un rectangle bleu apparaît sur la page web et devient rouge au survol.

Mon problème :
Si je rajoute dans mon html une balise de type input (testé avec toutes les balises html le problème n'est présent qu'avec input) :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
// HTML 
<div id="unique"></div> // Création de mon bouton
<input /> // Input n'importe lequel

Au chargement de la page le rectangle n’apparaît pas bleu directement mais une transition est effectué de la couleur de base de la div (transparent ou blanc) jusque la couleur bleu. J'ai donc une transition de plus que si le <input> n'étais pas présent.

J'attend impatiemment vos avis !!!

Merci d'avance.

[Invité]

Bonjour,

ce serait plus simple de répondre si tu fournissais un code fonctionnel, qui reproduit le problème rencontré.

De plus, merci de préciser sur quel navigateur (et version) le problème apparait.

[mamashi]

Le problème est identifié : bug du navigateur Google Chrome qui charge d'abord les valeurs initiale et après il overwrite les données en faisant une transition, le bug est déclenché notamment par la présente d'un input dans le code. Pour supprimer le bug déplacer le code CSS buggué directement dans la balise <style> du .html