iPhoneで一部のjQuery,JSが動きません…。

前提

ポートフォリオサイトを制作中に問題が発生。
問題のサイト【https://yamato11.com/】
ヒーローイメージの下のセクションでfadeIn機能がうまく動かず…。

jQuery,JSが、PCのRWDのときは動くのですが、
私のスマホ（iPhoneSE iOS15.5）のとき、
fadeIn機能のjQuery,JSが動かず…真っ白なままです…。
skillbarのjQueryは動いています。

Animate.css × jquery.inviewでfadeIn機能を実装中に問題が発生しました。
jQuery とCSS でfadeIn機能を実装しても同じ問題が発生しました

推測ですが…addClassが動いていないので、inviewがうまく動いていない…のかと…

実現したいこと

iPhoneSE iOS15.5でも、jQuery とCSS を組み合わせてスクロールをしたら要素を動かす。
fadeIn機能を動作するようにする。

該当のソースコード

HTML

<section id="voices"> <div class="voices_bg fadeInTrigger" style="visibility: visible; animation-duration: 2s; animation-delay: 0s;"> <p>Order & <br> Requests</p> </div> <div class="inner"> <div class="tbl"> <div class="cols tit_h2 fadeInLeftTrigger" style="visibility: visible; animation-duration: 2s; animation-delay: 0s;"> <h2>こんな依頼・相談<br> 解決致します！</h2> </div> <div class="cols voicebox fadeInRightTrigger" style="visibility: visible; animation-duration: 2s; animation-delay: 0s; "> <ul> <li class="voices_txt"> 新規事業立ち上げ・法人化・起業の際に新規でwebサイト制作を作りたい! </li> <li class="voices_txt"> 既存のWordpressサイトのリニューアルをしたい </li> <li class="voices_txt"> Webサイト・サーバの保守管理・修正業務の代行を依頼したい! </li> <li class="voices_txt"> 永く付き合える外部のWEBデザイナーを探している! </li> </ul> </div> </div><!-- tbl --> </div><!-- inner --> </section> <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/protonet-jquery.inview/1.1.2/jquery.inview.min.js"></script>

CSS

.fadeInUpTrigger,.fadeInLeftTrigger,.fadeInTrigger,.fadeInRightTrigger{ opacity:0;} .fadeUp{ animation-name:fadeUpAnime; animation-duration: 2s; animation-fill-mode:forwards; opacity:0; }

jQuery

$('.fadeInRightTrigger').on('inview', function(event, isInView) { if (isInView) { $(this).addClass('animate__animated animate__fadeInRight'); } }); $('.fadeInTrigger').on('inview', function(event, isInView) { if (isInView) { $(this).addClass('animate__animated animate__fadeIn'); } }); $('.fadeInUpTrigger').on('inview', function(event, isInView) { if (isInView) { $(this).addClass('animate__animated animate__fadeInUp'); } });

試したこと

Animate.css × jquery.inviewを使わず実装してみたのですが同じ結果でした…。

jQuery

function fadeAnime(){ $('.fadeUpTrigger').each(function(){ var elemPos = $(this).offset().top-50; var scroll = $(window).scrollTop(); var windowHeight = $(window).height(); if (scroll >= elemPos - windowHeight){ $(this).addClass('fadeUp'); } }); } $(window).scroll(function (){ fadeAnime(); });

補足情報（FW/ツールのバージョンなど）

情報をいただけると幸いです。