iOS SafariはCSSのfilterを画像に大量に適用すると画像がバグる

SafariはCSSのfilterでバグる

CSSのfilterはPhotoshopのように明度や彩度の調整などができて便利なので最近はよく使用しているWebサイトを見かけるが、iOS SafariだとCSSのfilterを画像に大量に適用すると一部の画像がバグるので注意が必要だ。

発生するのはiOS SafariなのでiPhoneやiPadなどで発生し、PC版のSafariだと発生しない。(そのせいで気付きにくい…)

filterで画像がバグるサンプル

百聞は一見にしかずということでfilterで画像がバグるサンプルを作成した。

「画像にfilter適用」ボタンを押すとfilter: brightness(120%)が適用されて一部の画像がバグる。

一見問題なさそうなときでもスクロールすると画像の表示が乱れてバグが確認できることがあるので試していただきたい。

※100%発生するバグではないので、すべての画像が正常に表示された場合はブラウザを更新してもう一度試していただきたい。
SafariはCSSのfilterを画像に大量に適用すると画像がバグる

filterを画像に大量に適用すると画像がバグるサンプル