前提
開発しているWebサイトで、iOS13(Safari13)以下の環境でのみ(おそらく)javascriptでエラーになってしまいます。
同様のページをiOS14以上やPC各ブラウザで表示する際には問題ありません。
環境的に問題端末でコンソールを確認したりすることが出来ませんが、更新履歴から問題点らしき箇所は絞り込みました。
該当ページの構成としては
・PHPでページ自体の構成を管理
・ページ内の一部の機能をJavaScriptで制御
・一部でReactやjQueryも使用
といった構成で動作させています。
追記
JQuery バージョンは3.3.1
発生している問題・エラーメッセージ
該当のページをSafari13以下の環境で表示した際に、PHPで表示させている部分までは表示されているが、JavaScriptで制御している部分から表示されなくなってしまう
Safari14以上や、PCのChrome、AndroidのChromeでは問題なくページ全体が表示され動作する。
該当のソースコード
関連していると思われるソースが二つありますのでそれぞれ記載します。
ソース一つ目
表示出来るタイミングでの関連と思われる部分のコード
JavaScript
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`, }) }
表示出来なくなったタイミングでの更新後のコード
JavaScript
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`, }) }
ソース二つ目
表示出来るタイミングでの関連と思われる部分のコード
JavaScript
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;
表示出来なくなったタイミングでの更新後のコード
JavaScript
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)の間でこれらに関連する変更があったかどうかの知見があまりありません。非推奨になったりしている記述があれば指摘いただけると助かります。よろしくお願いいたします。
まだ回答がついていません
会員登録して回答してみよう