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

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

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

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

HTML

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

CSS

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

解決済

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

M.K.D.G
M.K.D.G

総合スコア1

JavaScript

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

HTML

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

CSS

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

1回答

0評価

3クリップ

148閲覧

投稿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

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)の間でこれらに関連する変更があったかどうかの知見があまりありません。非推奨になったりしている記述があれば指摘いただけると助かります。よろしくお願いいたします。

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

miyabi_takatsuk
miyabi_takatsuk

2022/05/12 00:37

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

2022/05/12 01:02

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

2022/05/12 01:41

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

2022/05/12 01:42

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

2022/05/12 03:16

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

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

JavaScript

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

HTML

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

CSS

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