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

bug 复现,例如

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

在 Chrome 中表现正常:

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

在苹果手机中不正常:

../images/2022-09-06-safari-iphone.jpeg

原因是,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)