Impossible d'appliquer le filtre CSS au survol dans Safari

Question

J'ai remarqué que la modification de la propriété de filtre au survol provoque un comportement étrange dans Safari16.2 sur macOS : cela ne change pas réellement au survol. Si vous cliquez sur le texte, il change partiellement, ce qui n'est certainement pas le cas. . Le comportement idéal en utilisant -webkit-filter n'aide pas non plus. /*problem-relevantCSS*/div{background:red;filter:grayscale(1);}div:hover{filter:grayscal

P粉460377540 · Answer

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