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

Question

Mir ist aufgefallen, dass Änderungen an der Filtereigenschaft beim Bewegen des Mauszeigers zu einem seltsamen Verhalten in Safari 16.2 unter macOS führen: Wenn Sie mit dem Mauszeiger darauf klicken, ändert sich der Text teilweise, was definitiv nicht der Fall ist . Ideales Verhalten mit -webkit-filter hilft auch nicht. /*problem-relevantCSS*/div{background:red;filter:grayscale(1);}div:hover{filter:grayscal

P粉460377540 · Answer

这似乎是 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