ハマログ

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

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   asuka   2020年3月25日


関連記事

CocoaPodsでiPhoneアプリ用のライブラリを管理する

RubyのRubyGem, PHPのcomposer, JavaのMavenなど…

XcodeでGitを利用したバージョン管理するでござるの巻!

こんにちは、かねこです。 ちょっといまさらな話題ですが、XcodeからGitのリ…

macOS High Sierraでシステム終了時に英語表示になる

どうも! 最近、社用PCとしてMacBookProを買っていただいたのですが、使…


← 前の投稿

次の投稿 →