質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

1600閲覧

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

M.Ka

総合スコア1

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

3クリップ

投稿2022/05/11 11:08

編集2022/05/12 12:26

前提

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

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

追記
JQuery バージョンは3.3.1

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

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

該当のソースコード

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

ソース一つ目

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

JavaScript

1const adjustHeight = function(){ 2 const $target = $('.hogeClass'); 3 const $marginSize = 110; 4 5 const HeaderHeight = $('.content1').outerHeight(true) + $('.content2').outerHeight(true) + $('.content3').height(); 6 const contentHeight = $(window).height() - (HeaderHeight + $marginSize); 7 8 $target.css({ 9 'height': `${contentHeight}px`, 10 }) 11}

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

JavaScript

1const adjustHeight = function(){ 2 const $target = $('.hogeClass'); 3 const marginSize = 110; 4 5 const hogeHeight= ($(this).hasClass('[class=hoge1]')) ? $('.hoge1').outerHeight(true) : 0; 6 const hogeHeaderHeight = $('.hogehoge1').outerHeight(true) + $('.hogehoge2').outerHeight(true) + $('.hogehoge3').height() + hogeHeight; 7 const hogeVPHeight = ('visualViewport' in window) ? 8 (window.visualViewport.height - (hogeHeaderHeight + marginSize)) : 9 (window.innerWidth - (hogeHeaderHeight + marginSize)); 10 11 $target.css({ 12 'height': `${hogeVPHeight}px`, 13 }) 14 15 }

ソース二つ目

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

JavaScript

1 const ADJUSTMENT_VALUE = 100; 2 const doc = document.documentElement; 3 const body = document.body; 4 const scrollLeft = doc.scrollLeft || body.scrollLeft; 5 const scrollTop = doc.scrollTop || body.scrollTop; 6 7 const offsetTop = $(options.offsetTopLeftSelector).offset().top + $(options.offsetTopLeftSelector).height() - ADJUSTMENT_VALUE; 8 const offsetLeft = $(options.offsetTopLeftSelector).offset().left - scrollLeft + CARSLISTWIDTH / 2 - BUTTONWIDTH / 2; 9 const offsetBottom = $(options.offsetBottomSelector).offset().top - $(options.offsetBottomSelector).height() - targetHeight - options.elementFixedBottom; 10 const reachToBottom = scrollTop + $(window).height() - ADJUSTMENT_VALUE; 11 const top = $(window).height() - targetHeight - options.elementMarginBottom;

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

JavaScript

1 const ADJUSTMENT_VALUE = 100; 2 const doc = document.documentElement; 3 const body = document.body; 4 const scrollTop = doc.scrollTop || body.scrollTop; 5 6 const offsetTop = $(options.offsetTopLeftSelector).offset().top + $(options.offsetTopLeftSelector).height() - ADJUSTMENT_VALUE; 7 const offsetBottom = $(options.offsetBottomSelector).offset().top - $(options.offsetBottomSelector).height() - targetHeight - options.elementFixedBottom; 8 const top = scrollTop + window.visualViewport.height - targetHeight - options.elementMarginBottom; 9 const reachToBottom = scrollTop + $(window).height() - ADJUSTMENT_VALUE; 10 const hoge1Width = doc.querySelector('[class=hoge1]').offsetWidth; 11 const hoge2Half = doc.querySelector('[class=hoge2]').offsetWidth / 2; 12 const hoge3Bottom = doc.querySelector('[class=hoge3]').offsetBottom; 13 const hoge4Half = document.getElementById('hoge4').offsetWidth / 2; 14 const margin = 20; 15 const positionLeft = hoge1Width + hoge2Half + margin - hoge4Half; 16 const positionTop = hoge3Bottom + scrollTop + margin;

試したこと

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


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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

miyabi_takatsuk

2022/05/12 00:37

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

2022/05/12 01:02

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

2022/05/12 01:41

> また、PCのChromeやAndroidのChromeではエラーになりません。 Chromeのデベロッパーツールのエミュレータでは、iOSもありますが、それでもエラーはでない、ということで認識あってますか? ですが、なんにせよ、iOS13の実機のみと考えられますね。 こちらでも調査してみます。
miyabi_takatsuk

2022/05/12 01:42

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

2022/05/12 03:16

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

回答1

0

ベストアンサー

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

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

Window.visualViewport - Web API | MDN

にある通り、

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

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

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

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

投稿2022/05/12 01:51

編集2022/05/12 01:53
miyabi_takatsuk

総合スコア9528

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

M.Ka

2022/05/12 03:26

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問