线性渐变：Safari与Chrome

Question

我遇到的问题是，从页面边缘的半透明（〜。1不透明度）过渡到纯白色的渐变在Safari的边缘显得更亮。在Chrome和Firefox中，边缘是最黑暗的。在Safari中，似乎假设它添加到渐变中的白色背景。因此，边缘比渐变的中间更亮，因为渐变从半透明过渡到不透明的白色。

可以找到相关网页here。

相关的CSS是：

background: linear-gradient(to right, 
rgba(100,100,255,0.15) 0%,
rgba(255,255,255,1) 20%,
rgba(255,255,255,1) 80%,
rgba(100,100,255,0.15) 100%);

此CSS的屏幕截图看起来像这个：我尝试在CSS中添加“后备颜色”（实际上是背景图像）以帮助Safari，因为它似乎假设是白色背景，当添加到半透明的rgba（100,100,255,0.15）时，可以获得更轻的边缘。然而，这只会使一切变得更暗，并且不会克服边缘的亮度。结果可以在下面的截图中看到。这个CSS是：

background: linear-gradient(to right, 
rgba(100,100,255,0.15) 0%,
rgba(255,255,255,1) 20%,
rgba(255,255,255,1) 80%,
rgba(100,100,255,0.15) 100%)
rgba(100, 100, 255, .15);

这看起来像是：