如何在Safari上以线性渐变透明的方式去除背景图像上的灰色背景

我想创建这个问题，然后回答它，以防将来有人遇到它。在背景图像的线性渐变中使用透明作为颜色变量似乎存在一些问题。我怀疑它与背景图像、线性渐变、透明度和Safari的完全使用有关系。它会在假定出现背景图像的区域产生一种奇怪的灰色

 background-image: linear-gradient(to bottom, transparent,#fff);

---

解决方案是将背景图像更改为背景，并将透明度转换为255、255、255、0的rgba

在Safari中，如果您查看我创建的代码笔，您可以看到我能够复制问题并比较差异：

 .box{
   height: 100px;
   width: 100%;

   &--background{
     background: linear-gradient( to bottom, rgba(255,255,255,0),#fff);
   }

   &--backgroundimage{
     background-image: linear-gradient(to bottom, transparent,#fff);
   }
}