On different stacked line chart Firefox display the correct color and Chrome don’t…

Expected Behavior (Firefox)

Version 54.0 on ubuntu

Current Behavior

Version 59.0.3071.109 also on ubuntu

In the tooltip the color are correctly displayed but neither on the graph (incorrect transparency) nor in the legend (grey).

Code used

var ctx = document.getElementById("EvolutionBreackdownsChart");
var EvolutionBreackdownsChart = new Chart(ctx, {
    type: 'line',
    data: {
      labels: ["April", "May", "June", "July", "August", "September", "October", "November", "December", "January", "February", "March", "April"],
      datasets: [{
        label:'O',
        data: [20, 21, 19, 17, 22, 25, 23, 18, 15, 16, 17, 19, 20],
        fill: 'origin',
        backgroundColor: 'rgba(255, 148, 31, 0.2)',
        borderWidth:0.1,
        borderColor: 'rgba(255, 148, 31, 0.55)',
        pointRadius:3,
        pointBackgroundColor: 'rgba(255, 148, 31, 0.2)',
        pointBorderColor: 'rgba(255, 148, 31, 0.55)',
        pointHoverRadius:5,
        pointHoverBorderWidth:1,
        lineTension:0,
      }, {
        label:'A',
        data: [30, 28, 29, 32, 32, 31, 25, 29, 29, 30, 31, 28, 29],
        fill: '-1',
        backgroundColor:'rgb(255, 148, 31, 0.35)',
        borderWidth:0.1,
        borderColor: 'rgb(255, 148, 31, 0.75)',
        pointRadius:3,
        pointBackgroundColor: 'rgb(255, 148, 31, 0.35)',
        pointBorderColor: 'rgb(255, 148, 31, 0.75)',
        pointHoverRadius:5,
        pointHoverBorderWidth:1,
        lineTension:0,
      }, {
        label:'M',
        data: [10, 12, 13, 10, 11, 12, 11, 10, 12, 11, 11, 10, 9],
        fill: '-1',
        backgroundColor:'rgb(255, 148, 31, 0.5)',
        borderWidth:0.1,
        borderColor: 'rgb(255, 148, 31, 0.9)',
        pointRadius:3,
        pointBackgroundColor: 'rgb(255, 148, 31, 0.5)',
        pointBorderColor: 'rgb(255, 148, 31, 0.9)',
        pointHoverRadius:5,
        pointHoverBorderWidth:1,
        lineTension:0,
      }, {
        label:'R',
        data: [28, 29, 32, 31, 27, 25, 31, 33, 28, 33, 31, 30, 32],
        fill: '-1',
        backgroundColor:'rgba(255, 148, 31, 0.60)',
        borderWidth:0.1,
        borderColor: 'rgba(255, 148, 31, 1)',
        pointRadius:3,
        pointBackgroundColor: 'rgba(255, 148, 31, 0.60)',
        pointBorderColor: 'rgba(255, 148, 31, 1)',
        pointHoverRadius:5,
        pointHoverBorderWidth:1,
        lineTension:0,
      }, {
        label:'B',
        data: [12, 10, 7, 10, 8, 7, 10, 10, 16, 10, 10, 13, 10],
        fill: '-1',
        backgroundColor:'rgba(3, 169, 244, 0.25)',
        borderWidth:0.1,
        borderColor: 'rgba(3, 169, 244, 1)',
        pointRadius:3,
        pointBackgroundColor: 'rgba(3, 169, 244, 0.25)',
        pointBorderColor:  'rgba(3, 169, 244, 1)',
        pointHoverRadius:5,
        pointHoverBorderWidth:1,
        lineTension:0,
      },],
    },
    options: {
      scales: {
          yAxes: [{
            stacked:true,
            gridLines: {
              display:false,
            },
            ticks: {
              beginAtZero:true,
              fontColor:'#78909c',
              fontFamily:"'Source Sans Pro', sans-serif",
              fontSize:10,
            },
          }],
          xAxes: [{
            ticks:{
              fontColor:'#78909c',
              fontFamily:"'Source Sans Pro', sans-serif",
              fontSize:10,
              maxTicksLimit: 15,
              callback: function(tick) {
                  var characterLimit = 4;
                  if (tick.length >= characterLimit) {
                      return tick.slice(0, tick.length).substring(0, characterLimit - 1).trim();;
                  }
                  return tick;
              },
            },
          }]
      },
      legend: {
        position:"right",
        reverse:true,
      },
      tooltips: {
        backgroundColor:'rgba(3, 169, 244, 0.75)',
        bodyFontFamily:"'Source Sans Pro', sans-serif",
        titleFontStyle:"normal",
        bodyFontFamily:"'Source Sans Pro', sans-serif",
        displayColors: true,
        cornerRadius:0,
        intersect:false,
        mode: 'x-axis',
        callbacks: {
            title: function(tooltipItem){
                return this._data.labels[tooltipItem[0].index];
              }
          },
        itemSort: function(a, b) {
        return b.datasetIndex - a.datasetIndex
      },
      },
    }
});