レスポンシブ対応の背景アニメーションを作成中に
iPadで思うように動いてくれず困ってしまいました。
もし宜しければご教示下されると幸いです。
[動きと実装]
背景画像用のDivに、cssのクラス(※内容は下記)をつけて、
背景画像を常に横に動かし続ける挙動を作成しました。
lang
1.slider{ 2 -webkit-transition : -webkit-transform 6000ms cubic-bezier(0,0,1,1); 3 -moz-transition : -moz-transform 6000ms cubic-bezier(0,0,1,1); 4 -ms-transition : -ms-transform 6000ms cubic-bezier(0,0,1,1); 5 -o-transition : -o-transform 6000ms cubic-bezier(0,0,1,1); 6 transition : transform 6000ms cubic-bezier(0,0,1,1); 7 8 -moz-transform: translateX(-100px); 9 -webkit-transform: translateX(-100px); 10 -o-transform: translateX(-100px); 11 -ms-transform: translateX(-100px); 12 transform: translateX(-100px); 13}
[問題点]
他デバイス、ブラウザでは確認できなかったのですが、
iPadでタッチスクロールした際、途中まで横移動した背景画像が、
横移動する前の状態まで戻ってしまう現象が起きました。
(transitionで動かしていたスタイルが初期化されたような挙動)
何か解決策などございましたら、ご教示頂けると幸いです。
あなたの回答
tips
プレビュー