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

创建时间：2022-09-06

更新时间：20 小时前

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

bug 复现，例如

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

在 Chrome 中表现正常：

../images//34e5e5b0ee173a027aa59905761ea7a0a636fb.png

在苹果手机中不正常：

../images/203750f9069199fe80da9bab22548cc4d8aab6.jpeg

原因是，Safari 在渐变中对颜色的处理是同时渐变 rgba()中的每一个参数，transparent 等同于 rgba(0 0 0 / 0%)，因此实际上是从黑色到红色渐变，从全透明到不透明渐变。解决办法：把 background: linear-gradient(transparent, red) 修改为 background: linear-gradient(rgba(255,255,255,0), red)