html 在Safari中悬停时不应用CSS过滤器

pexxcrt2 于 2023-02-10 发布在其他

关注(0)|答案(1)|浏览(132)

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

悬停时它实际上不会改变
如果您单击文本，它确实会部分更改，这绝对不是所需的行为

使用-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）：

对此我们能做些什么呢？

Html

来源：https://stackoverflow.com/questions/75335595/css-filter-doesnt-apply-on-hover-in-safari

1条答案

按热度按时间

vulvrdjw1#

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

赞(0）回复(0）举报 2023-02-10

我来回答

html 在Safari中悬停时不应用CSS过滤器

1条答案

相关问题

热门标签

最新问答