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

Question

いつもお世話になっております。

楽天goldでページを作成したのですが、携帯端末で確認したところ
androidは問題なく動くのですが、iPhoneで見ると、見出し部分に指定したアニメーションが
動きませんでした。

こちらのサイト様を参考に外部リンクで読み込んで対応してみたのですが効かず…
(もしかしたらやり方を間違っているのかもしれませんが…)
https://qiita.com/4cres/items/9a6d038d50c504e8e436

解決策ありましたら教えていただきたいです。

ページURL
https://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でもエフェクトを作動させるにはコード自体丸ごと書き換えなければ
> ならないでしょうか…？

はい、動作しない原因の箇所を突き止めて
別の仕組みで代用できないか試行する、
などの方法で、書き換えを行う必要がございます。