スライダープラグインSwiperでは、slideかfadeモードを選ぶことが多いのですが、先日coverflowを実装しました。
そしたらiPhoneのSafariだけ動作がおかしい！
各種ブラウザやAndroidは良い感じなのに。
Swiper 基本の使い方
結論：
ベンダープレフィックスを書いたら直りました
cssファイルに以下のとおりに書きます。
.swiper-3d .swiper-cube-shadow, .swiper-3d .swiper-slide, .swiper-3d .swiper-slide-shadow, .swiper-3d .swiper-slide-shadow-bottom, .swiper-3d .swiper-slide-shadow-left, .swiper-3d .swiper-slide-shadow-right, .swiper-3d .swiper-slide-shadow-top, .swiper-3d .swiper-wrapper{
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
}
必要なのは-webkit-transform-styleでした。
セレクタはswiper.cssからコピペしたので長くなってしまいました。
上記のcssはswiper.cssよりあとに読み込んでください！
参考になりそうなTips
⇩動作サンプル
