Lignes étranges lors de l'utilisation de "background-clip: text" sur Safari

Question

J'essaie de créer du texte dégradé en utilisant CSS. Actuellement, cela fonctionne dans Chrome et Firefox, mais sur Safari, je vois des lignes étranges en dehors des frontières.

Mon CSS ressemble à ceci...

h1 {
    font-family: "Work Sans", Helvetica, Arial, sans-serif;
}

.highlighted {
    color: transparent;
    background: linear-gradient(90deg, #FF008B, #FF006B);
    background-clip: text;
    -webkit-background-clip: text;
}

Mon HTML n'est qu'un simple...

<h1>Welcome to <span class="highlighted">My site</span></h1>

Mais sur Safari, le rendu sera comme ceci.

Quelqu'un peut-il m'aider à réparer ces lignes ?

Answer 1

Vous pouvez essayer clip-path de résoudre ce problème :

h1 {
  font-family: "Work Sans", Helvetica, Arial, sans-serif;
}

.highlighted {
  color: transparent;
  background: linear-gradient(90deg, #FF008B, #FF006B);
  -webkit-background-clip: text;
          background-clip: text;
  padding: 1px;
  clip-path: inset(1px);
}

<h1>Welcome to <span class="highlighted">My site</span></h1>