Safari中CSS的linear-gradient从透明渐变发灰问题
创建时间：2022-09-06
更新时间：1 分钟前
在 css 中为元素添加一个渐变的背景色，如果渐变色中包含透明色 transparent，在苹果手机中呈现时，透明色会变成灰色。
bug 复现，例如
div {
width: 100px;
height: 100px;
background: linear-gradient(transparent, red);
}
在 Chrome 中表现正常：
在苹果手机中不正常：
原因是，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)