Seltsame Linien bei Verwendung von „background-clip:text“ in Safari

Question

Ich versuche, Verlaufstext mit CSS zu erstellen. Derzeit funktioniert es in Chrome und Firefox, aber in Safari sehe ich seltsame Linien außerhalb der Ränder.

Mein CSS sieht so aus...

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;
}

Mein HTML ist nur ein einfaches...

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

Aber auf Safari wird es so gerendert.

Kann mir jemand helfen, diese Zeilen zu reparieren?

Answer 1

您可以尝试 clip-path 来修复它：

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>