Le dégradé linéaire avec plusieurs couleurs sur Mozilla est floue

Question

Je souhaite que mon élément présente un dégradé de fond net avec plusieurs couleurs. Sur Chrome, cela fonctionne très bien, mais sur Firefox, il a des bords flous sur la transition.

Voici des exemples sur:

Firefox:

Chrome:

Comment puis-je faire pour travailler sur Firefox?

.footer::before { 
 
    display: block; 
 
    content: ""; 
 
    width: 100%; 
 
    height: 11px; 
 
    border-bottom: 1px solid #ffffff; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIxNi42JSIgc3RvcC1jb2xvcj0iI2ZmZDUwMyIvPjxzdG9wIG9mZnNldD0iMTYuNiUiIHN0b3AtY29sb3I9IiNmMzZmMjEiLz48c3RvcCBvZmZzZXQ9IjMzLjIlIiBzdG9wLWNvbG9yPSIjZjM2ZjIxIi8+PHN0b3Agb2Zmc2V0PSIzMy4yJSIgc3RvcC1jb2xvcj0iI2RhMjEyOCIvPjxzdG9wIG9mZnNldD0iNDkuOCUiIHN0b3AtY29sb3I9IiNkYTIxMjgiLz48c3RvcCBvZmZzZXQ9IjQ5LjglIiBzdG9wLWNvbG9yPSIjMDA5MDY2Ii8+PHN0b3Agb2Zmc2V0PSI2Ni40JSIgc3RvcC1jb2xvcj0iIzAwOTA2NiIvPjxzdG9wIG9mZnNldD0iNjYuNCUiIHN0b3AtY29sb3I9IiNiNTFlODMiLz48c3RvcCBvZmZzZXQ9IjgzLjglIiBzdG9wLWNvbG9yPSIjYjUxZTgzIi8+PHN0b3Agb2Zmc2V0PSI4My44JSIgc3RvcC1jb2xvcj0iIzAwNWE5ZSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==') 0 0/100% 11px no-repeat; 
 
    background: -moz-linear-gradient(0deg, #ffd503 16.6%,#f36f21 16.6%,#f36f21 33.2%,#da2128 33.2%,#da2128 49.8%,#009066 49.8%,#009066 66.4%,#b51e83 66.4%,#b51e83 83.8%,#005a9e 83.8%) 0 0/100% 11px no-repeat; 
 
    background: -webkit-linear-gradient(0deg, #ffd503 16.6%,#f36f21 16.6%,#f36f21 33.2%,#da2128 33.2%,#da2128 49.8%,#009066 49.8%,#009066 66.4%,#b51e83 66.4%,#b51e83 83.8%,#005a9e 83.8%) 0 0/100% 11px no-repeat; 
 
    background-image: linear-gradient(90deg, #ffd503 16.6%,#f36f21 16.6%,#f36f21 33.2%,#da2128 33.2%,#da2128 49.8%,#009066 49.8%,#009066 66.4%,#b51e83 66.4%,#b51e83 83.8%,#005a9e 83.8%) 0 0/100% 11px no-repeat; 
 
    background-size: 100% 150px, 100% 150px; 
 
}

<div class="footer"></div>

Answer 1

C'est une solution et non une solution.

Dans mon environnement, j'observe en fait le résultat inverse dans un violon js. Sur Mac Sierra exécutant FF 54.0.1, j'obtiens des transitions nettes. Cependant, sur Chrome 60.0.3112.101, j'obtiens des transitions floues. Ainsi, les résultats peuvent varier en fonction de l'environnement. Comme ce n'est pas censé être un gradient continu, permettez-moi de proposer une solution différente qui rendra croustillant dans n'importe quel navigateur. Fondamentalement, créer un conteneur pour contenir les boîtes de couleur solide, lui donner une position relative et placer votre élément avec une position absolue à l'intérieur du conteneur.

HTML

<div class="container"> 
<div class="box1"></div> 
<div class="box2"></div> 
<div class="box3"></div> 
<div class="box4"></div> 
<div class="box5"></div> 
<div class="box6"></div> 
<div class="my-element">my element</div> 
</div> 

CSS

.container {width:100%;margin:50px 0px 50px 0px;position:relative;left:0px;right:0px;} 
.container div {float:left;height:12px;width:16.6%;} 
.box1 {background-color:#ffd503;} 
.box2 {background-color:#f36f21;} 
.box3 {background-color:#da2128;} 
.box4 {background-color:#009066;} 
.box5 {background-color:#b51e83;} 
.box6 {background-color:#005a9e;} 

.my-element {position:absolute;top:0px;left:0px;} 

est ici un violon:

https://jsfiddle.net/jfeferman/rpfkpyvj/