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

<div>Hover Me</div>