ハマログ

株式会社イーツー・インフォの社員ブログ

iOS実機でドロワーメニューが開かなくて困った

某案件で、他社提供のHTMLファイルをサイトに組み込む作業中に、主題の件で行き詰ったのでメモも兼ねて共有します。

まず、提供ファイルをそのまま組み込んだら、もともとサイトにきいているCSSやjQueryと干渉しあってか、ハンバーガーメニューを開いた後のドロワーメニューがスクロールできない状態になりました。
この回避策として、ハンバーガーメニューがクリックされたらjQueryによって動的にclassをドロワーメニュー要素につけて、そこにposition: fixed;とbottom: 0;を設定することで解決しました。

が、、 デベロッパーツールとAndroidでは問題なく動いているのに、iOS Safari でドロワーメニューが動かない!
調査をしていて iOS Safariではある条件で、position: fixed;との相性が悪いと書かれた記事はいくつもありましたが、今回は下記情報に助けられました。
https://doggy-kbk12.com/fixed/

最初の事象の回避策として、ドロワーメニューの要素にposition:fixed;をいれたことによってスクロールすることはできたのですが、親要素のヘッダーにもposition: fixed;が設定されていたことが原因で次の事象が起きてしまっていました。 つまり、fixedした要素の中で、さらにfixedをさせていたことが原因で、記事にもある通り、ドロワーメニューがヘッダーの高さにfixedされるため、その下の領域は表示されない状況となっておりました。さらに、ドロワーメニューをヘッダーの高さぶん、下にずらすためにのtop:90px;を指定していたため、ヘッダーの表示領域からも隠れるという様でした。(ここも記事と同じ。)

自分でコーディングしていないこともあり、どこにどのclassがあたって作用しているかに気づくのに時間がかかってしまいましたが、今度からは同じような事象に出会ったとき、まずはこちらを疑いたいと思います。

CSSiOSコーディング

  asuka   2020年3月25日


関連記事

この絵文字の本当の意味

最近この絵文字の本当の意味を知ってびっくりしました。 ずっと「お願い」しているも…

欲しかった機能が実はすでにあった!iPhoneでイヤホンをしている時にドアベルの聞き逃し対策

テレワークでイヤホンをつけて仕事をしていたり、普段家で映画やyoutubeを見て…

ガリガリ君神経衰弱つくりなおしました!

以前から公開していた、ガリガリ君公式アプリ「ガリガリ君 神経衰弱」をSwift2…


← 前の投稿

次の投稿 →