CSS 过滤器不适用于 Safari 中的悬停

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;
}

<div>Hover Me</div>