搜尋

首頁  >  問答  >  主體

Safari中無法在懸停狀態下套用CSS濾鏡

我注意到,在懸停時對 filter 屬性進行更改會導致 macOS 上的 Safari 16.2 出現奇怪的行為:

使用 -webkit-filter 也沒有幫助。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

/* 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;

}

1

<div>Hover Me</div>

它的外觀如下(GIF):

對此可以採取什麼措施?

P粉436688931P粉436688931337 天前641

全部回覆(1)我來回復

  • P粉460377540

    P粉4603775402024-04-02 00:29:42

    這似乎是 webkit 的渲染錯誤。

    我找到了幾個解決方法:

    • 使用 transform 而不實際轉換任何內容(例如 scale(1))以某種方式修復此問題
    • 簡短的transition:0.05s 會有幫助(儘管創建了不需要的過渡),任何更長的過渡也可以解決問題(如果您通常想在此處放置過渡,您可能永遠不會發現這個問題)

    有趣的事實:甚至更短過渡(即 0.03s)並不能解決任何問題。

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    /* 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;

    }

    1

    <div>Hover Me</div>

    回覆
    0
  • 取消回覆