28172 sujets

CSS et mise en forme, CSS3

[Résolu]BUG chrome & opera ou mauvais css ?

Bonjour,

J'ai crée sur mon site un menu , ou chaque lien au "Hover" a un style box-shadow inset ainsi qu'un border radius. http://cherche.job.59.free.fr

Sur FF3.6, FF4, Safari le rendu est bon.

Sous Chrome j'ai bien le box-shadow inset, mais le border radius n'est pas appliqué, par contre sous Opera je n'ai pas du tout d'effet.

Voici le test case.


<!DOCTYPE html>
<html lang="fr">
    <head>
        <title>title</title>
        <meta charset="utf-8">
        <!--[if IE]>
        <script type="text/javascript">
        document.createElement("nav");
        </script>
        <![endif]-->
        <style>

    </style>
    </head>
    <body>
        <div id="wrapme">
            <nav role="navigation">
                <ul>
                    <li>
                        <a href="#">Lien 1</a>
                    </li>
                    <li>
                        <a href="#">Lien 2</a>

                    </li>
                    <li>
                        <a href="#">Lien 3</a>
                    </li>
                    <li>
                        <a href="#">Lien 4</a>
                    </li>
                </ul>

            </nav>
        </div>
    </body>
</html>




body{
	font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
	}
	
body, ul, li{
	margin:0;
	padding:0;
	}
	
#wrapme{
	width:960px;margin:0 auto;
	}

nav{
	display : block;
	background: #ccc;
	-moz-box-shadow:5px 5px 15px #666;
	-webkit-box-shadow:5px 5px 15px #666;
	box-shadow:5px 5px 15px #666;
	padding:5px 15px;
	margin:30px 0;
	-moz-border-radius:5px;
	border-radius:5px;
}
	
nav li{
	display:inline;
	}
	
nav li a{
	text-shadow:3px 3px 5px #fff;
	color:#333333;
	text-decoration:none;
	display:inline-block;
	font-size:1.2em;
	height:40px;
	line-height:40px;
	padding:0 25px;
	text-align:center;
	}
	
nav li a:hover{
	-moz-border-radius:5px;
	border-radius:5px;
	-webkit-box-shadow:inset 0 0 5px #777;
	-moz-box-shadow:inset 0 0 5px #777;
	text-shadow:-2px -2px 5px #fff;
	}

Modifié par rs459 (05 Feb 2011 - 03:44)
Bonjour,

premièrement, as-tu les dernières versions de chaque navigateur?

J'ai rencontré un problème similaire récemment mais le rendu était légèrement différent, notamment pour Chrome. Avec la version 9.0.597.84, les deux propriétés sont appliquées; le problème est que le box-shadow : inset est appliqué sur la forme de base de l'élément, sans prendre en compte le border-radius. Cela donne un rectangle dessiné par l'ombre interne contenant la forme arrondie, ce qui est des plus laids.
En revanche Opéra gère très bien les deux propriétés ensemble, dans sa dernière version en tout cas (11.01).
Ces propriétés fonctionnent très bien ensemble sur tous les navigateurs modernes exceptés Chrome et IE, bien sûr. Aucune solution pour le moment ne permet de distinguer Chrome (à ma connaissance, j'en cherche toujours une) sans atteindre Safari également.

Les solutions les plus pertinentes que j'ai pu trouver sont :
- laisser tel quel, tant pis pour Chrome (ce qui n'est pas vraiment une solution mais peut-être un compromis dans certains cas);
- "sacrifier" une propriété dans les navigateurs webkit : au choix l'ombre ou l'arrondi, suivant ce qui se rapproche le plus de l'effet visuel désiré. Enlever simplement "-webkit-box-shadow" suffit pour l'ombre, si tu préfères sacrifier l'arrondi tu devras utiliser un petit hack css propre à webkit.

Il existe peut-être des scripts js qui pourraient résoudre cette situation, mais je ne me suis pas penché dessus (c'est contre ma religion d'utiliser du js pour hacker du css).

J'ai passé plusieurs jours sur ce cas et la meilleure solution a été de minimiser les dégâts. Puisque tu utilises des propriétés comme les ombres et arrondis tu devais t'attendre à quelques incompatibilités, probablement pas celles-ci!!
Je suivrais malgré tout cette discussion au cas ou une idée surgirait!

Bon courage!!
Re-bonjour,

en cherchant chez les gars de chromium, j'ai trouvé des pistes qui pourraient t'intéresser :

- si l'épaisseur de ta bordure est supérieure ou égale à la valeur de flou de ton ombre, alors tout se passera bien. ( ça peut être une solution efficace suivant le rendu recherché ).

- dans certains cas utiliser une valeur rgba pour la couleur de l'ombre semble résoudre le problème ( cela ne fonctionne pas chez moi mais ça se tente ).

- il existe effectivement des scripts qui modifient directement la gestion des objets par Chrome, peu recommandable à mon avis.

- sinon les dév de Chrome assure que le problème est connu chez eux et résolu pour la prochaine version ( le problème est connu depuis la version 6 et on en est à la 9 ...).

C'est tout ce que j'ai pu trouver!
Bonjour, et merci.

Effectivement c'est un bug réferencé sous Chrome.

http://code.google.com/p/chromium/issues/detail?id=29427

Pour Opera c'est moi qui bug j'avais même pas fait attention que j'avais uniquement utilisé
-webkit et -moz.

J'ai mis un border 1px solid #eee; c'est pas aussi beau que sur les autres navigateurs mais c'est un contournement au mieux.
Modifié par rs459 (05 Feb 2011 - 20:59)
Hello,
En retirant le inset de box shadow au hover pour webkit l'effet est quasi similaire sous chrome...
A+
Sujet clos
Aller à