web-dev-qa-db-fra.com

gradient linéaire ne fonctionne pas dans Chrome

Après une bonne quantité de recherche, je suis coincé avec un gradient linéaire qui fonctionne dans Firefox mais pas dans Chrome.

J'ai ajouté -webkit- avant gradient linéaire comme décrit dans une référence mais ne fonctionne toujours pas je pense que le problème est dans l'axe du gradient

Mon code

<nav class="top_menu">
    <ul class="black_high">
        <li class="first active"> <a href="#">Home</a>

        </li>
        <li> <a href="#">news</a>

        </li>
    </ul>
</nav>

.top_menu ul li.active a::after {
    position: absolute;
    bottom: 8px;
    left: 0;
    width: 100%;
    height: 2px;
    transform:none;

    content: '';
    opacity: 1;
    background: #fff;
    background: linear-gradient(left, transparent 0%,#fff 50%,transparent 100%);
    background: -moz-linear-gradient(left, transparent 0%,#fff 50%,transparent 100%);
    background: -webkit-gradient(left, transparent 0%,#fff 50%,transparent 100%);
}

Crée un violon ici - http://jsfiddle.net/h2zu5xx2/4/

Tout indice/suggestion fera très bien. Merci d'avance.

cssgoogle-chromelinear-gradients
11
Raj

Tout d'abord, notez que -webkit-gradient A été conçu par Apple et implémenté en 2008 dans les navigateurs Web basés sur Webkit (par exemple Safari 4) qui a une syntaxe assez différente de la norme W3C:

-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)

Par exemple:

background: -webkit-gradient(linear, left top, right top, color-stop(0%,#87e0fd), color-stop(40%,#53cbf1), color-stop(100%,#05abe0));

C'est pourquoi vous ne pouviez pas le faire fonctionner dans votre cas.

Un an plus tard, Mozilla a introduit -moz-linear-gradient (Depuis Firefox 3.6) qui a également une syntaxe différente de l'ancienne version de Webkit mais qui a ensuite été implémentée dans Webkit sous -webkit-linear-gradient:

-moz-linear-gradient([ [ [top | bottom] || [left | right] ],]? <color-stop>[, <color-stop>]+)

Cependant, la version standard W3C de linear-gradient Est très différente, la syntaxe formelle de l'expression linear-gradient() est:

linear-gradient() = linear-gradient(
  [ <angle> | to <side-or-corner> ]? ,
  <color-stop-list>
)
<side-or-corner> = [left | right] || [top | bottom]

Comme vous pouvez le voir dans votre code publié, l'autre erreur est le manque de to <side> Dans la version W3C. Par conséquent, dans votre cas, ce devrait être:

Exemple ici.

background: -webkit-gradient(linear, left top, right top, color-stop(0%, transparent), color-stop(50%,#fff), color-stop(100%,transparent)); /* Chrome, Safari4+ */
background: -webkit-linear-gradient(left, transparent 0%,#fff 50%,transparent 100%); /* Chrome10+, Safari5.1+ */
background: -moz-linear-gradient(left, transparent 0%,#fff 50%,transparent 100%);    /* FF3.6+ */
background: linear-gradient(to left, transparent 0%,#fff 50%,transparent 100%);      /* W3C */
19
Hashem Qolami

Utilisation

background: -webkit-linear-gradient(left, transparent 0%,#fff 50%,transparent 100%);

comme la définition similaire à celle de Mozilla.

1
podwysoc