Transition en 2 temps sur Safari

Bonjour tout le monde ;

Je suis actuellement confronté au problème suivant :

Soit un menu horizontal ; en dessous j'ai placé une barre de quelques px de hauteur et de largeur. Lorsque l'on passe la souris sur une des catégories du menu, la barre horizontale se positionne en dessous de la catégorie sus-citée, et change également de largeur width. (Et bien sûr, lorsque la souris n'est plus sous la catégorie, la barre horizontale reprend sa position initiale & sa largeur initiale, mais ce n'est pas ce qui pose problème ici)

Du coup, 2 propriétés sont utilisées : une propriété pour déplacer la barre (transform: translate), et une autre pour modifier sa taille (width). Tout se passe bien dans le meilleur des mondes, excepté sous Safari, où le changement de taille intervient non pas pendant la transition, mais après. Bref, il y a une sorte de décalage, de delay, de "après coup", et c'est pas terrible…


Code HTML :

<nav>
	<ul>

                      <!-- Chaque catégorie se trouve dans un <li>. Si aucun des li n'est en hover, la barre horizontale se trouve en dessous du "Li-Accueil" -->
	
		<li id="li_accueil"><a href="">A</a></li>
		<li id="li_categorie1"><a href="">Catégorie 1</a></li>
		<li id="li_categorie2"><a href="">Catégorie 2</a></li>
		<li id="li_categorie3"><a href="">Catégorie 3</a></li>

                      <!-- La barre horizontale, nommée nav_underline : -->

		<div id="nav_underline"></div>			
	
	</ul>
</nav>

Code CSS :

/* Je pose ici le style de ma barre, notamment les transitions. Dans mes tests de résolution, j'ai tenté de placer le transition-delay, mais cela n'a aucun impact */

nav #nav_underline  
{
	min-height: 1px;
	width: 2em; 
        opacity: .3;
	border: 1px outset rgba(80,80,215,0.8);
	background-color: rgba(130,130,255,0.5);
	-webkit-transition-delay: 0;
	   -moz-transition-delay: 0;
		 -o-transition-delay: 0;
			transition-delay: 0;
	-webkit-transition: all .3s ease;
	   -moz-transition: all .3s ease;
	     -o-transition: all .3s ease;
			transition: all .3s ease;
}

/* Changement de quelques propriétés (opacité, couleur de fond et couleur du bord) lorsque la souris est sur l'un des Li */

nav ul li:hover ~ #nav_underline
{
	opacity: .9;
	background-color: rgba(130,130,255,0.5);
	border: 1px outset rgba(130,130,255,0.5);
}

/* Exemple de ce qu'il se passe pour la barre lorsque la souris est spécifiquement sur le premier Li. C'est ici qu'intervient les changements de position & de width. Bien entendu, ce code se répète avec d'autres valeurs pour les autres Catégories */

nav #li_categorie1 ~ #nav_underline
{
	-webkit-transform: translateX(3em);
		-ms-transform: translateX(3em);
			transform: translateX(3em);
	width: 10em;
}

Bref, je vais continuer à chercher de mon côté, mais si jamais l'un ou l'une d'entre vous est déjà tombé sur ce problème, n'hésitez pas à faire signe (en sachant que je suis déjà passé par des recherches infructueuses sur ce forum, et sur le net en général)

Bon, non seulement ce bug n'est pas résolu de mon côté malgré quelques recherches et tests, mais d'autres ont fait leur apparition, toujours sur Safari. Et c'est apparemment lié aux transitions.

En gros, le logo principal du site, se voit appliquer une toute petite animation lorsque la souris ne se trouve pas sur l'image. Hier après quelques tests d'affichage sous Mac, on s'est rendu compte que d'une page à l'autre, bien que le code soit strictement identique, que le logo variait en dimensions…

Je crois que c'est la première fois que Safari devient ma bête noire à la place d'IE…