ios下文字渐变失效
文字渐变css
background: linear-gradient(90deg, #3B45FF 0%, #F700B7 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
症状
在ios的浏览器打开，应用了该样式的文字变成了透明色
复现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>文字渐变消失bug复现</title>
<style>
.gradient-color {
background: linear-gradient(90deg, #3b45ff 0%, #f700b7 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
width: 200px;
}
.flex {
display: flex;
}
</style>
</head>
<body>
<div class="flex gradient-color">文字消失了(ios)</div>
<div class="gradient-color">正常渐变</div>
</body>
</html>
或打开codepen查看例子(使用苹果手机打开可复现问题)。
解决
经过排查，发现是跟display:flex这个css属性冲突了，把display改为其他值时就显示出来了。
评论