[Résolu] Firefox et linear-gradient

Bonjour,

Je n'arrive pas à faire fonctionner mes règles linear-gradient sous Firefox (sur tous les autres browers : OK). Je me dis que j'oublie forcément quelque chose... Si vous avez ne serait-ce qu'un début d'explication, je suis preneur.

Voici une page test sur laquelle est placé un menu accordéon qui devrait comporter un effet de gradient. L'effet est présent sur tous les navigateurs, sauf sous Firefox.

PS : les linear-gradient n'ont plus besoin d'être préfixés depuis la version 16 de Firefox. De toute façon, même quand je préfixe, par précaution, cela ne change rien...

Merci pour vos réponses éventuelles.
Modifié par Olivier C (01 Dec 2018 - 13:34)

heu, la feuille de style est imbuvable en l'état, il y a moyen de nous extraire html et css correspondant avec le défaut en évidence ?

Sinon , ily a : .range::-webkit-slider-thumb qui fait que FF va zapper tout les sélecteurs et regles associées, à mettre à part, seul si necessaire.

En gros, tu as là une astuce pour filtrer webkit , un peu comme le @-moz-document url-prefix() {} mais sans garanties dans le temps
Modifié par gc-nomade (19 Jun 2014 - 00:27)

gc-nomade a écrit :
heu, la feuille de style est imbuvable en l'état, il y a moyen de nous extraire html et css correspondant avec le défaut en évidence ?

Je l'avais justement posté car le style est tellement dense (en quantité) qu'il me semblait opportun de le livrer dans le contexte.

Mais sinon, pour ce qui concerne directement l'élément (.accordion a), ça donne ceci :

.js [class^="accordion"] a {
    overflow: hidden;
    display: block;
    padding: 0 u(.5rem);
    font-size: u(1.4rem);
    height: u(4rem);
    line-height: u(4rem);
    border-bottom: none;
    color: #fff;
    background-color: #ff6f7d;
}

.js [class^="accordion"] > li > a {
    background-image: -webkit-linear-gradient(top, $arguments); /* @affected Safari 5.1+, Chrome 10+ */
    background-image: linear-gradient(to bottom, $arguments); /* @affected Standard */
}

Le code est en deux parties car les gradients sont factorisés. Ce que je vous donne ici est le code final généré par SASS.

Ce qui m'embête c'est que je ne vois pas l'appel à la deuxième partie de ma règle dans l'inspecteur de Firefox.

gc-nomade a écrit :
Sinon , ily a : .range::-webkit-slider-thumb qui fait que FF va zapper tout les sélecteurs et regles associées, à mettre à part, seul si necessaire.

Je ne veux pas de hack, il doit surement y avoir un moyen de régler cela plus proprement...
Modifié par Olivier C (19 Jun 2014 - 18:36)

Merci,
en fait dans :

.gradient,[class^="label"] label,.search-form button,.range::-webkit-slider-thumb,.range+output,[class^="table"] thead,.nav-top .active,.nav-top a:hover,.nav-top a:focus,.nav-top a:active,.js [class^="accordion"]>li>a,[class^="button"]{background-image:-webkit-linear-gradient(top, transparent,rgba(0,0,0,0.2));background-image:linear-gradient(to bottom, transparent,rgba(0,0,0,0.2))}

tu as ton fautif : .range::-webkit-slider-thumb
++

gc-nomade a écrit :
Merci,
en fait...
...tu as ton fautif : .range::-webkit-slider-thumb
++

Quel talent

gc-nomade a écrit :
en fait...
...tu as ton fautif : .range::-webkit-slider-thumb Smiley smile
++

Merci à toi gc-nomade, je n'avais pas compris ta première réponse. C'est exactement ça. Je viens de retoucher mon code en local pour tester.

6l20 a écrit :

Quel talent

Là je dois dire... et quelle réactivité !

Par contre moi... je n'ai même pas pris en compte un message d'avertissement que j'avais écris en commentaire dans mon propre code ! :

.range::-webkit-slider-thumb { /**
                                * @bugfix
                                * @affected Firefox
                                * @note     Cette déclaration ne se factorise pas sous Firefox
                                */
    -webkit-appearance: none;
    position: relative;
    z-index: 3;
    width: u(3rem);
    height: u(3rem);
    background: $color2;
    @extend .gradient; /* Et là j'avais mis un extend SASS... quel boulet je suis ! */
    border-radius: 50%;
}

Modifié par Olivier C (19 Jun 2014 - 18:54)