iOSのsafariでSwiperのeffect: fadeで画像が重なる

スライダーライブラリSwiperのフェードエフェクトで透過PNGなどで構成されたスライドを切り替える際、iPhoneやiPadなどiOSのsafariだと、fadeEffect: { crossFade: true }をオプションで指定しても画像が重なってしまう現象が起きてしまいます。

解決方法

fadeEffectオプションのtransformElにフェードさせたい要素を指定します。これを指定することにより、スライド自体がフェードするのではなく、その中に含まれる指定した要素がフェードするようになります。具体的にはimgタグやその囲んでいるブロックなどを指定します。

この3つの透過PNGを使ったSwiperのサンプルです。

transformElなし(iOSのsafariでみると、ループ2週目で画像が重なります）

fadeEffect: {
    crossFade: true
}

transformElあり(iOSのsafariでみても画像が重なりません）

fadeEffect: { 
    crossFade: true,
    transformEl: 'img',
}