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があたって作用しているかに気づくのに時間がかかってしまいましたが、今度からは同じような事象に出会ったとき、まずはこちらを疑いたいと思います。