研发日志

与研发有关的总结和经验

0%

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

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

bug 复现,例如

1
2
3
4
5
div {
width: 100px;
height: 100px;
background: linear-gradient(transparent, red);
}

在 Chrome 中表现正常:
https://images.wosaimg.com/2e/34e5e5b0ee173a027aa59905761ea7a0a636fb.png

在苹果手机中不正常:

https://images.wosaimg.com/97/203750f9069199fe80da9bab22548cc4d8aab6.jpg

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

z-hodor 支付宝