IOSだけアニメーションが動かない

Question

いつもお世話になっております。楽天goldでページを作成したのですが、携帯端末で確認したところandroidは問題なく動くのですが、iPhoneで見ると、見出し部分に指定したアニメーションが動きませんでした。こちらのサイト様を参考に外部リンクで読み込んで対応してみたのですが効かず…(もしかしたらやり方を間違っているのかもしれませんが…)https://qiita.com/4cres/items/9a6d038d50c504e8e436解決策ありましたら教えていただきたいです。ページURLhttps://www.rakuten.ne.jp/gold/tokeiten/feature/5sports/index.html

Accepted Answer

ECマスターズの田中です。> エフェクトのコード自体がIOSに対応されてないのでしょうか。MacのSafariでもエフェクトが反映されなかったため確認を進めたところ、animate.cssの中で使われている仕組みが作動しないことを確認しました。（keyframesを利用したカスタムプロパティの動的変更）おっしゃるとおり、コード自体がiOSに対応していないようです。

Answer

ECマスターズの田中です。iPhone以外でも、Mac上のChromeでも（おそらく他のデバイスでも）、アニメーション用の画像ファイルをキャッシュから読み込んだ際に、アニメーションが完了した状態で表示されることがわかりました。JavaScriptを利用して、画像ファイルのURLに過去アクセスされたことのないパラメータを随時追記することで、キャッシュからの読み込みを回避することができます。たとえば、下記のような処理を加えていただく形です。= この下の行から ====================/* アニメーション動作用 */$(function(){ $('.header_titel img').attr('src', $('.header_titel img').attr('src')+"?"+(new Date().getTime()) ); });= この上の行まで ====================

Answer

ご回答ありがとうございます！メインで使っているアニメーション画像がスムーズに動くようになりました！「非日常アクティブなシーンを彩るシリーズ」↑こちらの見出しテキストにテキストエフェクトを指定しているのすが、IOS環境でだけうまく反映ができません。(確認した端末：iPhone7、iPhone10)参考サイトを元にエフェクトを指定しているkeyframesなどを外部ファイルからjQueryで読み込むようにしてみましたが、反映されません。エフェクトのコード自体がIOSに対応されてないのでしょうか。

Answer

ありがとうございます。IOSでもエフェクトを作動させるにはコード自体丸ごと書き換えなければならないでしょうか…？

Answer

ECマスターズの田中です。> IOSでもエフェクトを作動させるにはコード自体丸ごと書き換えなければ> ならないでしょうか…？はい、動作しない原因の箇所を突き止めて別の仕組みで代用できないか試行する、などの方法で、書き換えを行う必要がございます。

IOSだけアニメーションが動かない

カテゴリーから探す