Swiperを使って、メインスライダーとサムネイルスライダーを連動させたときの話です。
ネットで検索すると、それらしい実装例が出てくるので、そのまま使ったのですが、iphone実機で確認するとスライド切り替え時にフリッカーのような白いノイズが一瞬表示される現象が起きました。
いつも起きるわけではなく、サムネイル側をフリックしていってフリックを止めた時にメインスライダー側にたまに発生する現象です。
実機iphoneだけで発生する問題なのでデバッグもできず、解決までに結構時間がかかりました。
同じように困っている人がいるかもしれないのでメモしておきます。
Swiperでサムネイル連動スライドを実装する
この辺の記事が参考になります。
公式（最新版なのでVer4系は非対応）
Swiper - Thumbs gallery - Codesandbox
Swiper - Thumbs gallery using swiper, parcel-bundler
codesandbox.io
Ver4対応
Just a moment...
codepen.io
Just a moment...
codepen.io
Swiperのスライド時のちらつきを無くす対策
-webkit-backface-visibility: hidden;
を追加しろという記事をよく見かけます。
swiper.js使ってみたからそのオプションについて(v4.1.6) | なんかいろいろデザインする人
これは旧バージョンのswiperのオプションについて書いた記事です。最新版（6系）のオプションについてはこちら
reiwinn-web.net
私のケースはそれではダメでした。
最終的に
-webkit-transform-style: preserve-3d;
を追加することで、フリッカーは無くなりました。
.swiper-slide {
-webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
}まとめ
iphone実機で不具合が起きると、実機デバッグできる環境がないとお手上げになります。
その場合、ネットで検索した情報を頼りにするしかありません。
今回は、色々調べる手間はありましたが、最終的にネットにある情報で解決できたので幸運でした。
