18008 sujets

Questions générales et questions de débutants

Couleur lien avec transform Firefox

Modérateur
Bonjour,

Ce que je vais décrire ci-dessous n'a lieu que pour Firefox 37.0.2 (pas pour Chrome, ni pour IE).
Le texte de l'étiquette de la page courante de mon site reste blanc alors qu'il devrait obtenir une autre couleur :
nav a:link, nav a:visited { display: inline-block; margin: 0 0 0 2px; padding: 5px 8px; text-decoration: none; background: #990000; color: #FFF; z-index: 30; }
nav a:hover, nav a:active, nav a:focus, nav a.active { background: #FFF; color: #990000; z-index: 40; }

J'ai appliqué une transformation sur les étiquettes de la manière suivante :
/* Transform and transition */
nav a { -webkit-transform: rotate(-60deg); transform: rotate(-60deg); }
nav a:hover, nav a.active  { -webkit-transform: rotate(-60deg) scale(1.2); transform: rotate(-60deg) scale(1.2); }
nav a, nav a:hover, nav a.active, ul#buttons li a, ul#buttons li a:hover, article a, article a:hover, article#contact input#submit, article#contact input#submit:hover { -moz-transition: all 0.5s; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; }

Le phénomène disparait quand je redimensionne la fenêtre et que les étiquettes passent à l'horizontale :
nav li a, nav li a:hover, nav li a.active { border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; -o-border-radius: 6px; margin: 0 3px 6px; transform: rotate(0) }

D'autre part, lorsque l'on laisse suffisamment longtemps le pointeur de la souris au-dessus d'une autre étiquette, la couleur ets également modifiée.

Je pense que c'est un bogue de Firefox lié au transform. Ça ne le faisait pas dans une version postérieure de Firefox.
Vous confirmez ?
Mon site pour voir ce dont je parle : http://jojaba.fr

Merci Smiley smile
Modifié par jojaba (06 May 2015 - 06:48)
Modérateur
Ah ben finalement, non, ça ne fonctionne pas.
Comme dit auparavant, seul Firefox n'affiche pas les intitulés des pages actives...
C'est bien un bogue n'est-ce pas ?
Modérateur
Salut,

Quel est le comportement que tu n'as pas / que tu attends ?

A la lecture de ton code (un peu arrangé pour faciliter la lecture.......) :
nav a:link,
nav a:visited {
	display: inline-block;
	margin: 0 0 0 2px;
	padding: 5px 8px;
	text-decoration: none;
	background: #990000;
	color: #FFF;
	z-index: 30;
}
nav a:hover,
nav a:active,
nav a:focus,
nav a.active {
	background: #FFF;
	color: #990000;
	z-index: 40;
}

Le titre de la page active/courante à le même style que quand on survole à zavoir fond blanc, écriture rouge et tout les autres en rouge écriture blanche.
C'est bien ce qui s'affiche chez moi (FF 37.0.2).

Je ne reproduit pas les bug dont tu parle.. Smiley ohwell



Au passage pour l'attribution des transitions tu as plein de sélecteur inutile. Par exemple : "nav a, nav a:hover, nav a.active," c'est inutile. Si tu colle une transition à "nav a", pas besoin de lui recoller en :hover et en .active c'est le même élément.
Modérateur
Merci Laurent.

Chez moi j'ai ça :
upload/3069-pb-jojaba.png

a écrit :
Au passage pour l'attribution des transitions tu as plein de sélecteur inutile. Par exemple : "nav a, nav a:hover, nav a.active," c'est inutile. Si tu colle une transition à "nav a", pas besoin de lui recoller en :hover et en .active c'est le même élément.

Oui, mais il me semble qu'avec Chrome j'avais eu des problèmes, c'est pour cela que j'ai ajouté les pseudos-classes liées aux liens de la navigation...
Modifié par jojaba (05 May 2015 - 16:01)
Modérateur
Effectivement j'ai pas du tout ce comportement... je pense avoir le bon rendu. J'arrive pas a reproduire tes bug en tout cas (malgré navigation dans tout les sens et F5 répétés)... désolé Smiley ohwell
Modérateur
J'ai trouvé !
J'ai testé avec un autre profil Firefox et ça ne l'a pas fait. Après vérifications, c'est l'extension Web Developper qui semble être responsable de cela ! En tout cas, en la désactivant, tout est rentré dans l'ordre.
Ouf ! Smiley smile
Modifié par jojaba (05 May 2015 - 21:39)
Modérateur
Euh, j'ai peut-être parlé un peu vite...
Ça le refait quand je redimensionne la fenêtre du navigateur, et cela pour tous les profils Firefox (j'en ai créé un exprès sans extension et paf, encore le même problème).
Peut-être tout de même un bogue navigateur... Pourrais-tu vérifier ça Laurent ?
Modérateur
Tout marche toujours pour le mieux ici... upload/42161-jojaba.png

C'est vraiment étrange parce-que la couleur du texte rouge est dans la même classe que le background blanc... or toi t'as le bg blanc mais pas le texte rouge... c'est ouf...
Modérateur
Merci pour ton test.

C'est rassurant que ce ne soit que moi qui ait ce problème (encore que ce ne soit pas sûr !!!)

Je confirme qu'en redimensionnant la fenêtre du navigateur, l'étiquette reste blanche. En revanche, lorsque je redimensionne suffisamment pour que les étiquettes reviennent en position horizontal, plus de problème. Voici le code pour tourner les étiquettes :

/* Transform and transition */
nav li a, nav li a:hover, nav li a.active { 
    -webkit-transform: rotate(-60deg);
    transform: rotate(-60deg);
}
nav li a:hover, nav li a.active  {
    -webkit-transform: rotate(-60deg) scale(1.25);
    transform: rotate(-60deg) scale(1.25);
} 
nav li a, nav li a:hover, nav li a.active, ul#buttons li a, ul#buttons li a:hover, article a, article a:hover, article#contact input#submit, article#contact input#submit:hover {
    -moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}

En commentant les deux première propriétés, l'étiquette active s'affiche correctement (horizontalement donc) :

/* Transform and transition */
/* nav li a, nav li a:hover, nav li a.active { 
    -webkit-transform: rotate(-60deg);
    transform: rotate(-60deg);
}
nav li a:hover, nav li a.active  {
    -webkit-transform: rotate(-60deg) scale(1.25);
    transform: rotate(-60deg) scale(1.25);
} */
nav li a, nav li a:hover, nav li a.active, ul#buttons li a, ul#buttons li a:hover, article a, article a:hover, article#contact input#submit, article#contact input#submit:hover {
    -moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}

Cela vient donc bien de rotate.
Quelqu'un a-t-il le même rendu que moi ?
Modifié par jojaba (06 May 2015 - 14:03)
Sujet clos
Aller à