Safariでホバー時にCSSフィルターを適用できない

Question

マウスオーバー時に filter プロパティを変更すると、macOS 上の Safari 16.2 で奇妙な動作が発生することに気付きました:

• 実際にはホバーしても変化しません
• テキストをクリックすると部分的に変化しますが、これは明らかに理想的な動作ではありません

-webkit-filter を使用しても役に立ちません。

リーリー リーリー

これは次のようになります (GIF):

これについて何ができるでしょうか?

Answer 1

これは Webkit レンダリング エラーのようです。

いくつかの解決策を見つけました:

• 実際に何も変換せずに transform を使用すると (例: scale(1))、何らかの方法でこれを修正できます
• 短い transition:0.05s は役に立ちます (望ましくないトランジションを作成するにもかかわらず)、より長いトランジションでも問題は解決します (通常ここにトランジションを置きたい場合は、この問題は決して発見されない可能性があります) )

面白い事実: トランジションを短くしても (つまり 0.03s)、何も解決しません。

リーリー リーリー