search

Home  >  Q&A  >  body text

Can't apply CSS filter on hover in Safari

I noticed that making changes to the filter property on hover causes strange behavior in Safari 16.2 on macOS:

Using -webkit-filter doesn't help either.

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

Here’s what it looks like (GIF):

What can be done about this?

P粉436688931P粉436688931233 days ago511

reply all(1)I'll reply

  • P粉460377540

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

    This seems to be a webkit rendering error.

    I found several solutions:

    • Using transform without actually transforming anything (e.g. scale(1)) fixes this somehow
    • Short transition:0.05s will help (despite creating an unwanted transition), any longer transition will also do the trick (if you normally want to put transitions here, you might This problem will never be discovered)

    Fun fact: Even a shorter transition (i.e. 0.03s) doesn't solve anything.

    /* 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;
    }
    Hover Me

    reply
    0
  • Cancelreply