ブルーシュ

IT技術の勉強記録

ホーム > Tips > フロントエンド

Swiper coverflowの動作がiPhoneでおかしい

, , , ,

スライダープラグインSwiperでは、slidefadeモードを選ぶことが多いのですが、先日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

 
⇩動作サンプル

Swiper coverflowの動作がiPhoneでおかしい #フロントエンド #ウェブデザイン #ウェブ制作 #WEBデザイン #WEB制作 #css #safari #スライダー #ベンダープレフィックス #Swiper

作者の似顔絵

秋田市在住のプログラマーです。
プログラミングを始めて18年、まだまだ日々勉強。調べたことをブログにまとめていきます。
記事の感想・質問・間違い指摘などはツイッター ( @blooshcompany ) へお願いします。