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改为其他值时就显示出来了。

评论

0 / 800
全部评论()