Tidak boleh menggunakan penapis CSS pada tuding dalam Safari

Question

Saya perasan bahawa menukar atribut filter pada tuding menyebabkan gelagat pelik dalam Safari 16.2 pada macOS:

• Ia sebenarnya tidak berubah semasa tuding
• Jika anda mengklik pada teks, ia sebahagiannya berubah, yang pastinya bukan tingkah laku yang ideal

Menggunakan -webkit-filter juga tidak membantu.

/* problem-relevant CSS */

div{
  background: red;
  filter: grayscale(1);
}
div:hover{
  filter: grayscale(0);
}

/* some further styling for readability */

div{
  display: flex;
  justify-content:center;
  color: white;
  padding:10px;
  font-size:25px;
}

<div>Hover Me</div>

Begini rupanya (GIF):

Apa yang boleh dilakukan mengenai perkara ini?

Answer 1

Ini nampaknya pepijat pemaparan webkit.

Saya menemui beberapa penyelesaian:

• Gunakan transform 而不实际转换任何内容（例如 scale(1)) untuk membetulkan ini entah bagaimana
• Pendek transition:0.05s akan membantu (walaupun mencipta peralihan yang tidak diingini), sebarang peralihan yang lebih lama juga akan menyelesaikan masalah (jika anda biasanya mahu meletakkan peralihan di sini, anda mungkin tidak akan menemui masalah)

Fakta menyeronokkan: Peralihan yang lebih pendek (iaitu 0.03s) tidak menyelesaikan apa-apa.

/* solution-relevant CSS */

div{
  background: red;
  filter: grayscale(1);
}
div:hover{
  filter: grayscale(0);
  transform: scale(1);
}

/* some further styling for readability */

div{
  display: flex;
  justify-content:center;
  color: white;
  padding:10px;
  font-size:25px;
}

Hover Me