Safari中CSS的linear-gradient从透明渐变发灰问题

在 css 中为元素添加一个渐变的背景色，如果渐变色中包含透明色 transparent，在苹果手机中呈现时，透明色会变成灰色。

bug 复现，例如

css

div {
  width: 100px;
  height: 100px;
  background: linear-gradient(transparent, red);
}

在 Chrome 中表现正常：

$../images/2022-09-06-safari-chrome.png$

在苹果手机中不正常：

原因是，Safari 中 transparent 等同于 rgba(0 0 0 / 0%)，在渐变中对颜色的处理是同时渐变 rgba()中的每一个参数，从黑色（0,0,0）到红色渐变，从全透明(0%)到不透明(100%)渐变。

解决办法：

background: linear-gradient(transparent, red)

修改为

background: linear-gradient(rgba(255,255,255,0), red)