Safari에서 마우스를 올리면 CSS 필터를 적용할 수 없습니다.

Question

마우스를 가리킬 때 filter 속성을 변경하면 macOS의 Safari 16.2에서 이상한 동작이 발생하는 것으로 나타났습니다.

• 마우스를 올려도 실제로 변경되지 않습니다
• 텍스트를 클릭하면 부분적으로 변경되는데 이는 확실히 이상적인 동작이 아닙니다

-webkit-filter을 사용해도 도움이 되지 않습니다.

으아아아 으아아아

다음과 같습니다(GIF):

이 경우 어떻게 할 수 있나요?

Answer 1

웹킷 렌더링 버그인 것 같습니다.

몇 가지 해결책을 찾았습니다:

• 이 문제를 해결하려면 transform 而不实际转换任何内容（例如 scale(1))를 사용하세요
• 짧은 transition:0.05s이 도움이 될 것입니다(원치 않는 전환을 생성하더라도). 더 긴 전환도 문제를 해결합니다(일반적으로 여기에 전환을 삽입하려는 경우 문제를 찾지 못할 수도 있습니다)

재미있는 사실: 더 짧은 전환(예: 0.03s)으로는 아무 것도 해결되지 않습니다.

으아악 으아악