亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

Community

Learn

Tools Library

AI Tools

Leisure

English

Can't apply CSS filter on hover in Safari

P粉436688931 2024-04-01 08:19:51

731

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

It doesn't actually change on hover
If you click on the text it does partially change, which is definitely not ideal behavior

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粉436688931

reply all(1)

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

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

Like +0

Add Reply