Impossible d'appliquer le filtre CSS au survol dans Safari

Question

J'ai remarqué que la modification de l'attribut filter au survol provoque un comportement étrange dans Safari 16.2 sur macOS :

• Cela ne change pas réellement au survol
• Si vous cliquez sur le texte, celui-ci change partiellement, ce qui n'est certainement pas un comportement idéal

Utiliser -webkit-filter n’aide pas non plus.

/* 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>

Voici à quoi cela ressemble (GIF) :

Que peut-on faire à ce sujet ?

Answer 1

Cela semble être un bug de rendu du webkit.

J'ai trouvé plusieurs solutions :

• Utilisez transform 而不实际转换任何内容（例如 scale(1)) pour résoudre ce problème d'une manière ou d'une autre
• Court transition:0.05s aidera (malgré la création d'une transition indésirable), toute transition plus longue fera également l'affaire (si vous souhaitez normalement mettre des transitions ici, vous ne trouverez peut-être jamais le problème)

Fait amusant : Une transition encore plus courte (c'est-à-dire 0.03s) ne résout rien.

/* 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