css3のfilter: saturate();がiPhoneXのchromeでバグる

ネットで調べても出てこなかったので書いておく。

2018年の10月時点の話ですので今後変わっていくとは思います。

eyescreamさんのサイトから撮った映像だけど

css3の画像の彩度を上げてくれる、filter: saturate();ってやつ。おしゃれ。

レスポンシブサイトでホバー時に使ってたんだけどfilter: saturate();をベンダープレフィクスをつけてもiphoneXのchromeからみるとスクロールした時に以下のようにバグる(静止画。もう公開してこの状態ではないので極小サイズで撮ってた画像です。粗々だよ☆)

↑元の状態

filter: saturate();のバグ画像
filter: saturate();のバグ画像

↑バグ。3つ記事を並べて全ての画像にfilter: saturate();をつけてる状態でスクロールしたとき。

簡単に確認した感じ、ベンダーをつけた上で、PCはどのブラウザでも大丈夫そう。Androidも大丈夫。

iphoneはXしか手元にないので昔の機種はわからんが、XSのchromeでも同じ現象になったとのこと。safariも大丈夫。

なので、現状iphoneXのchromeでのみ発生と認識して、でもiPhoneX持ってる人なんて少ないので

jsでiphone端末の時はfilter: none;に設定して対処しました。

そもそもスマホからはホバーアクションいらないと思うので、スマホからのアクセス時は外しちゃってもいいかもね。

てなわけで備忘録でした〜。