我注意到，在悬停时对 filter 属性进行更改会导致 macOS 上的 Safari 16.2 出现奇怪的行为：
使用 -webkit-filter 也没有帮助。
1
940/* 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）：
对此可以采取什么措施？
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
这似乎是 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; }