JavaScriptのHTML要素などの取得で、iOS13(Safari13)以下でのみエラーになる記述があるか知りたい

Question

前提

開発しているWebサイトで、iOS13(Safari13)以下の環境でのみ(おそらく)javascriptでエラーになってしまいます。
同様のページをiOS14以上やPC各ブラウザで表示する際には問題ありません。
環境的に問題端末でコンソールを確認したりすることが出来ませんが、更新履歴から問題点らしき箇所は絞り込みました。

該当ページの構成としては
・PHPでページ自体の構成を管理
・ページ内の一部の機能をJavaScriptで制御
・一部でReactやjQueryも使用
といった構成で動作させています。

追記
JQuery バージョンは3.3.1

発生している問題・エラーメッセージ

該当のページをSafari13以下の環境で表示した際に、PHPで表示させている部分までは表示されているが、JavaScriptで制御している部分から表示されなくなってしまう
Safari14以上や、PCのChrome、AndroidのChromeでは問題なくページ全体が表示され動作する。

該当のソースコード

関連していると思われるソースが二つありますのでそれぞれ記載します。

ソース一つ目

表示出来るタイミングでの関連と思われる部分のコード

const adjustHeight = function(){
    const $target = $('.hogeClass');
    const $marginSize = 110;

    const HeaderHeight = $('.content1').outerHeight(true) + $('.content2').outerHeight(true) + $('.content3').height();
    const contentHeight = $(window).height() - (HeaderHeight + $marginSize);

    $target.css({
      'height': `${contentHeight}px`,
    })
}

表示出来なくなったタイミングでの更新後のコード

const adjustHeight = function(){
    const $target = $('.hogeClass');
    const marginSize = 110;

    const hogeHeight= ($(this).hasClass('[class=hoge1]')) ? $('.hoge1').outerHeight(true) : 0;
    const hogeHeaderHeight = $('.hogehoge1').outerHeight(true) + $('.hogehoge2').outerHeight(true) + $('.hogehoge3').height() + hogeHeight;
    const hogeVPHeight = ('visualViewport' in window) ?
      (window.visualViewport.height - (hogeHeaderHeight + marginSize)) :
      (window.innerWidth - (hogeHeaderHeight + marginSize));

    $target.css({
      'height': `${hogeVPHeight}px`,
    })

  }

ソース二つ目

表示出来るタイミングでの関連と思われる部分のコード

      const ADJUSTMENT_VALUE = 100;
      const doc = document.documentElement;
      const body = document.body;
      const scrollLeft = doc.scrollLeft || body.scrollLeft;
      const scrollTop = doc.scrollTop || body.scrollTop;

      const offsetTop = $(options.offsetTopLeftSelector).offset().top + $(options.offsetTopLeftSelector).height() - ADJUSTMENT_VALUE;
      const offsetLeft = $(options.offsetTopLeftSelector).offset().left - scrollLeft + CARSLISTWIDTH / 2 - BUTTONWIDTH / 2;
      const offsetBottom = $(options.offsetBottomSelector).offset().top - $(options.offsetBottomSelector).height() - targetHeight - options.elementFixedBottom;
      const reachToBottom = scrollTop + $(window).height() - ADJUSTMENT_VALUE;
      const top = $(window).height() - targetHeight - options.elementMarginBottom;

表示出来なくなったタイミングでの更新後のコード

      const ADJUSTMENT_VALUE = 100;
      const doc = document.documentElement;
      const body = document.body;
      const scrollTop = doc.scrollTop || body.scrollTop;

      const offsetTop = $(options.offsetTopLeftSelector).offset().top + $(options.offsetTopLeftSelector).height() - ADJUSTMENT_VALUE;
      const offsetBottom = $(options.offsetBottomSelector).offset().top - $(options.offsetBottomSelector).height() - targetHeight - options.elementFixedBottom;
      const top = scrollTop + window.visualViewport.height - targetHeight - options.elementMarginBottom;
      const reachToBottom = scrollTop + $(window).height() - ADJUSTMENT_VALUE;
      const hoge1Width = doc.querySelector('[class=hoge1]').offsetWidth;
      const hoge2Half = doc.querySelector('[class=hoge2]').offsetWidth / 2;
      const hoge3Bottom = doc.querySelector('[class=hoge3]').offsetBottom;
      const hoge4Half = document.getElementById('hoge4').offsetWidth / 2;
      const margin = 20;
      const positionLeft = hoge1Width + hoge2Half + margin - hoge4Half;
      const positionTop = hoge3Bottom + scrollTop + margin;

試したこと

表示されなくなってしまったタイミングのコミットから遡り、表示出来るタイミングのコミットとの差異を絞り込みました。
JavaScriptでのHTML要素の取得に関する記述がほとんどのため、これらの記述で問題のある記述があるか知りたいです。

---

iOSでの挙動に明るくないため、iOS13～14(Safari13～14)の間でこれらに関連する変更があったかどうかの知見があまりありません。非推奨になったりしている記述があれば指摘いただけると助かります。よろしくお願いいたします。

Comments

[miyabi_pudding]

どんなエラーがでていますか？
iOSならば、macOSとつないで、
macOSのSafariにて、実機の要素検証（デベロッパーツールを起動）でJSのエラーが確認できますので、
それでエラーの内容確認してみてください。
ちなみに、おそらくですが、
Chromeのエミュレータなど上ではエラーが出なく、実機のみの現象ではないでしょうか？

[M.K.D.G]

現在扱える環境にmacOSがなく、実機を繋いでのコンソール確認が出来ずエラー内容は確認出来ません。詳細な情報が出せず申し訳ないです。

また、PCのChromeやAndroidのChromeではエラーになりません。

[miyabi_pudding]

> また、PCのChromeやAndroidのChromeではエラーになりません。

Chromeのデベロッパーツールのエミュレータでは、iOSもありますが、それでもエラーはでない、ということで認識あってますか？

ですが、なんにせよ、iOS13の実機のみと考えられますね。
こちらでも調査してみます。

[miyabi_pudding]

一点、可能性として、jQueryを使用されているようなので、jQueryのバージョンが関係しているかもしれないので、
jQueryのバージョンも記載してください。

[M.K.D.G]

>Chromeのデベロッパーツールのエミュレータでは、iOSもありますが
こちら確認出来ておりませんでしたが、改めて確認したところエラーにはならないようでした。

JQueryのバージョンについて、追記として記載しました。

Answer 1

まず初めに、本回答は、可能性の示唆のため、正答ではないかもしれませんのでご了承ください。
※質問者さんの方で、質問のアップデートがあったりなど進展があった場合、本回答も合わせてアップデートいたします。

Window.visualViewportAPIを使用しているのが、原因の可能性が非常に高いです。

Window.visualViewport - Web API | MDN

にある通り、

Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

となっていることと、
対応バージョンが、
iOS Safari13↑とあるため、
ギリギリ対応しているが、バグなどが残っている、などの問題がある可能性があると思われます。

動作するコードとの差分を鑑みても、
そのAPIを使用した一行が原因の可能性が非常に高いでしょう。

よって、iOS13の対応が必須ならば、
代替のレガシーコードに替えるか、
Babelなどの、後方互換対応を自動で行なってくれるツールを使用した方がいいかと思います。

Comments

[M.K.D.G]

window.visualViewportを使用している箇所を変更してwindow.innerWidthなどを使うようにしたところ、エラーにならずページ全体を表示することが出来ました。ありがとうございました。