Bug graphique border transition safari

Bonjour tout le monde.

J'ai un problème sur safari. Sur mon menu j'ai des boutons avec un border radius et un gradient. De plus j'applique un effet de transition.

Tout marche bien sauf sur safari que me provoque un bug graphique dont je n'en ai pas la moindre solution pour le résoudre. Voici le code:

#nav li a {
text-decoration:none;
color:#535353;
padding:7px;
background-color: transparent;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-transition: all .6s ease;
-moz-transition: all .6s ease;
-ms-transition: all .6s ease;
-o-transition: all .6s ease;
transition: all .6s ease;
}

#nav li a:hover{
background-color: #1d1d1d; /* Old browsers */
background-color: -moz-linear-gradient(top,  #1d1d1d 0%, #525252 100%); /* FF3.6+ */
background-color: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1d1d1d), color-stop(100%,#525252)); /* Chrome,Safari4+ */
background-color: -webkit-linear-gradient(top,  #1d1d1d 0%,#525252 100%); /* Chrome10+,Safari5.1+ */
background-color: -o-linear-gradient(top,  #1d1d1d 0%,#525252 100%); /* Opera 11.10+ */
background-color: -ms-linear-gradient(top,  #1d1d1d 0%,#525252 100%); /* IE10+ */
background-color: linear-gradient(to bottom,  #1d1d1d 0%,#525252 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1d1d1d', endColorstr='#525252',GradientType=0 ); /* IE6-9 */
color: #fff;
-webkit-border-radius:5px;
-moz-border-radius:5px;
-ms-border-radius:5px;
-o-border-radius:5px;
border-radius:5px;
}

Et voici le bug graphique :
https://www.dropbox.com/s/cvja0dt2km8yqf2/prob.jpg

Avez-vous une idée ?

Bonjour,

Sans code HTML, sans voir le contexte qui pourrait éventuellement interagir (notamment le reste de la feuille de styles) difficile de vous venir en aide
Une page en ligne est beaucoup plus parlante

Test rapide et rien à signaler de particulier sur aucun navigateur (sous Mac).

6l20 a écrit :

Test rapide et rien à signaler de particulier sur aucun navigateur (sous Mac).

Tu as demandé l'autorisation à Apple™ d'installer un autre navigateur que Safari™ ?
Modifié par jb_gfx (04 Jul 2013 - 12:27)

jb_gfx a écrit :
Tu as demandé l'autorisation à Apple™ d'installer un autre navigateur que Safari™ ?

Non, c'est vrai, mais en même temps, il n'a pas refusé

6l20 a écrit :
Bonjour,

Sans code HTML, sans voir le contexte qui pourrait éventuellement interagir (notamment le reste de la feuille de styles) difficile de vous venir en aide
Une page en ligne est beaucoup plus parlante

Test rapide et rien à signaler de particulier sur aucun navigateur (sous Mac).

Ton test me produit le même problème sur SAFARI !! toujours ces petit bords qui apparaissent !!!

Voir l'image du problème
Je précise que c'est lorsque je passe la souris que les bors apparaissent.

je serais tenter (sans page en test ni de MAC a dispo) de dire "remplace pour commencer" :

background-color: transparent;

par

background-color: rgba(0,0,0,0);

voir si cela suffit a faire disparaitre tes bordures fantômes.
ou bien je n'ai compris le defaut sur le screen shot.
++

gc-nomade a écrit :
je serais tenter (sans page en test ni de MAC a dispo) de dire "remplace pour commencer" :

background-color: transparent;

par

background-color: rgba(0,0,0,0);

voir si cela suffit a faire disparaitre tes bordures fantômes.
ou bien je n'ai compris le defaut sur le screen shot.
++

ça ne change rien. Mais c'est étrange car ça me le fait sur mon safari (6.0.5) mais pas sur celui d'un ami (5.1.9).

Je viens de retirer les BORDER-RADIUS du #nav li a et le problème disparait mais néanmoins au debut de la transition j'ai des bords carré qui deviennent rond avec la transition (c'est moche).

Version 6.0.5 (7536.30.1) de Safari
Version 27.0.1453.116 de Chrome
Et je ne rencontre pas ton souci

Très étrange. Effectivement je viens de testé sur d'autre safari en 6.0.5 et le problème n'apparait pas. C'est exclusivement sur mon mac j'ai l'impression...

Edit:
Je suis perdu, sous 6.0.3 c'est le même problème. Sous 5+ aucun problème ...
Modifié par paulgelo (04 Jul 2013 - 14:44)

Une page de test en ligne reproduisant le phénomène ?

Voici la page du site (pas officielement en ligne )

Il n'est pas a jour car je travail en local. L'animation de transition n'est donc pas présente mais vous pouvez du coup l'ajouter.

voir le site ici