网格线在Edge＆Safari上显示/显示错误的颜色

Question

我有一个正常的折线图...

网格线是灰色的，不会改变。这适用于chrome和firefox。

在Safari和edge上，网格线消失，直到我将鼠标悬停在图表上的某个点上，然后网格线将变为我悬停的线的颜色，如下所示...

我尝试在轴上添加和更改不同的网格线属性，但似乎没有任何改变。

scales:
           {
               yAxes:
               [
                   {id: 'Numbers', position: 'left', gridLines: {drawOnChartArea: false, color: "rgba(255,255,255,0)", zeroLineColor: "rgb(255, 255, 255, 1)", drawTicks: true},
                   ticks: {beginAtZero: false, fontSize: this.get('fontSize'), fontColor: '#999999', fontFamily: 'Akzidenz_Groteskbe--medium', padding: 12,
                   min: 0, stepSize: maxValueLeft/ this.get('chartSteps'), max: maxValueLeft,
                   callback: function(value) {return self.get('dataService').formatNumber(value);}}},

                   {id: 'Sterling', position: 'right', gridLines: {drawOnChartArea: false, color: "rgba(255,255,255,0)", zeroLineColor: "rgb(255, 255, 255, 1)", drawTicks: false},
                   ticks: {beginAtZero: false, fontSize: this.get('fontSize'), fontColor: '#999999', fontFamily: 'Akzidenz_Groteskbe--medium', padding: 12,
                   min: 0, stepSize: maxValueRight/ this.get('chartSteps'), max: maxValueRight,
                   callback: function(value) {return self.get('dataService').formatCurrency(value);}}}
               ],

               xAxes:
               [
                   {ticks: {fontSize: 12, fontColor: '#999999', fontFamily: 'Akzidenz_Groteskbe--medium', labelOffset: 13, padding:14},
                   gridLines: {color: "rgb(216, 216, 216, 1)", zeroLineColor: "rgb(255, 255, 255, 0)", drawTicks: false}}
               ]
           }