我注意到，在懸停時對 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）：
對此可以採取什麼措施？
這似乎是 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; }