《cssとjQueryでアニメーション》iPhone Chromeでスムーズに動かない

Question

いつも大変お世話になっております。
いくらか調べて自己解決できなかったので、
質問させていただきます。

発生している問題

jQueryにてクラス付与したタイミングで
cssに書いたkeyframesのアニメーションを動かしています。

iPhoneのGoogle Chromeで
挙動がアニメーションになってくれません。

解決方法をネットで検索していて
「動きがカクカクする」「スムーズじゃない」などはありますが
「カクカク」…というよりも
「ON / OFF」…というような挙動です。

手持ちの端末はAndroid/iPhone8/iPad Mini第5世代で
・iPhone8のChromeはだめ、iPad MiniのChromeは大丈夫。
・iPhone8のChromeはだめ、AndroidのChromeは大丈夫。
・iPhone8でもSafariは大丈夫。

さらに困るのは、なぜか時々スムーズに動くことがあって、
それが何によるものなのかがわからないのです。

キャッシュの問題？と思ってみても、
キャッシュクリア直後にスムーズになったり
ただのリロードでスムーズになったり
スムーズになってくれたなぁと思っていても
またリロードしたらスムーズじゃなくなったり…

以下にて現在のコードを掲載させていただきます。

現状のコード

  $(window).scroll(function () {
    var obj_t_pos = $('#example').offset().top;
    var scr_count = $(document).scrollTop() + (window.innerHeight / 2);
    if (scr_count > obj_t_pos) {
      $('#example').addClass('fadeIn');
    } 
  });
//スクロールして#exampleがディスプレイの1/2地点まで来たら
//#exampleに.fadeInを付与

<div id="example" class="fadeIn"><!-- class="fadeIn"は上記jQueryで付与 -->
  <ol>
    <li>hoge１</li>
    <li>hoge2</li>
    <li>hoge3</li>
  </ol>
</div>

@keyframes fadeIn {
    0% { opacity: 0; transform: translateY(30px); }
  100% { opacity: 1; transform: translateY(0); }
}
#example li{
  opacity: 0;
  transform: translateY(30px);
  transform: translate3d(0, 0, 0); /*←理解してない*/
  backface-visibility: hidden; /*←理解してない*/
}
#example.fadeIn li:nth-child(1){
  animation: fadeIn 1s ease-in-out 0s 1 forwards;
}
#example.fadeIn li:nth-child(2){
  animation: fadeIn 1s ease-in-out 0.3s 1 forwards;
}
#example.fadeIn li:nth-child(3){
  animation: fadeIn 1s ease-in-out 0.6s 1 forwards;
}
/*
親#exampleに.fadeInが付与されたらアニメーション開始
liが0.3秒ずつ遅れて、下か上にスライド且つフェードイン
*/
/*
◎「opacity: 0;」 から0.3秒遅れて「opacity: 1;」は動いてくれます。
◎「1sの間にスムーズに」という部分でアニメーションとして動いてくれません。
*/

試したこと

safari, iOS で CSS アニメーションが動かない（不安定）

https://qiita.com/4cres/items/9a6d038d50c504e8e436

　

iOS SafariでCSS3のアニメーションがチラつく

https://teratail.com/questions/205416

似ている質問

iOSのChromeでtransitionやtransformが効かない

https://teratail.com/questions/194563

↑「なんか解決しました。」とかやめて………
ただ、時々スムーズになったりすることもあるので
「なんか解決しました。」ってことになるのかなぁ。。。

一応、各種OS、ブラウザもアップデートして最新のようです。

解決のために必要な情報が抜けているようでしたら
ご指摘ください。

モヤモヤして心が晴れないので、
どうか助けていただけると幸いです( ; _ ; )

Answer 1

わりかしiOS系だとそういう事象はメモリの圧迫等の理由からよく起きます。
なので、使ってないアプリケーションは完全に閉じることをお勧めします。

iPad6, iPhone7, iPhoneSEを持っていますがどの機種でもどのブラウザでも同様の挙動は起きたり起きなかったり

Comments

[kyoya0819]

他の所有端末、
Windows10 PCとかは起きたことないです。

やっぱメモリの容量の差かな？知らんけど

[bakaringo]

メモリという存在を忘れていました。
バックグラウンドのアプリケーションを見てみると
溜まりに溜まって開きっぱなしのアプリがたくさんあり、
全部閉じて、端末も再起動したところ
問題なくスムーズなアニメーションになりました。

電化製品のFAQで
「電源が入りません→コンセントは繋がっていますか？」並の恥ずかしさです…

ありがとうございました！
コードが間違ったりしていることもなくて安心しました。

[matsuedon]

iPhone7、カクカクだったのでこれを見て、すべてのアプリを終了後chrome起動、ページを見るとなるほど、スムーズに動きました。