Garis pelik apabila menggunakan "klip latar belakang: teks" di Safari

Question

Saya cuba membuat teks kecerunan menggunakan CSS. Pada masa ini ia berfungsi dalam Chrome dan Firefox, tetapi pada Safari saya melihat garis pelik di luar sempadan.

CSS saya kelihatan seperti ini...

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

HTML saya ringkas sahaja...

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

Tetapi pada Safari ia akan dipaparkan seperti ini.

Bolehkah sesiapa membantu saya membetulkan talian ini?

Answer 1

Anda boleh mencuba clip-path untuk memperbaikinya:

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>