Safari中无法在悬停状态下应用CSS滤镜

Question

我注意到，在悬停时对 filter 属性进行更改会导致 macOS 上的 Safari 16.2 出现奇怪的行为：

• 悬停时它实际上不会改变
• 如果您点击文本，它确实会发生部分变化，这绝对不是理想的行为

使用 -webkit-filter 也没有帮助。

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

它的外观如下（GIF）：

对此可以采取什么措施？

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