Der CSS-Filter kann beim Hover in Safari nicht angewendet werden

Question

Mir ist aufgefallen, dass das Ändern des Attributs filter beim Hover zu seltsamem Verhalten in Safari 16.2 unter macOS führt:

• Es ändert sich eigentlich nicht, wenn man mit der Maus darüber fährt
• Wenn Sie auf den Text klicken, ändert er sich teilweise, was definitiv kein ideales Verhalten ist

Die Verwendung von -webkit-filter hilft auch nicht.

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

So sieht es aus (GIF):

Was kann man dagegen tun?

Answer 1

这似乎是 webkit 的渲染错误。

我找到了几种解决方法：

• 使用 transform 而不实际转换任何内容（例如 scale(1)）以某种方式修复此问题
• 简短的 transition:0.05s 会有帮助（尽管创建了不需要的过渡），任何更长的过渡也可以解决问题（如果您通常想在此处放置过渡，您可能永远不会发现这个问题）

有趣的事实：甚至更短过渡（即 0.03s）并不能解决任何问题。

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