レスポンシブ対応のサイトではよくある、グローバルメニューを画面横に隠しておいて、ハンバーガーメニューをクリックすると横からヌルっと出てきて表示するという機能をコーディングしていたときのこと。
PCのブラウザで確認し、エミューレーターでも確認でき、いざスマホで確認すると一応隠れているが、指で画面タッチしたまま横にスライドするとなんとメニューが表示してしまった。
確かにFirefoxのエミュレーターで疑似タッチ機能を有効にしたら、メニューが横に見えた。
CSSではbodyにoverflow-xでhiddenに設定するという方法を行ったが、なんとスマホではそれは通用しなかった。PCとスマホのブラウザ仕様が違うのか、タッチパネル式のモニターであるスマホでレンダリングの仕組みが違うのか分からない。
このようなメニューで良く使うCSSとしてはtransformのtranslateでサイドに移動させて隠すという手法。
transform: translate(100%, 0);要素実態はそのタグがある場所の位置にあるまま、目に見える表示の位置は違う場所という感じで、positionのfixed、absoluteと同じような感じになるけど、positionとの違いとしては、fixedはブラウザの表示枠の左上が基準、absoluteは親タグの左上が基準、transformのtranslateは表示する場所からズラしているという認識。
そういう意味で、body内に表示するものが存在し、見え方だけ枠から外すという形だったのだが、なぜかその外した表示までが全体の横幅というふうにスマホのブラウザは認識してしまっているという現象が起きていた。
色々とネットで調べるとこの現象を防ぐためにbodyにoverfrow-xにhiddenを適用するということなのだそうで、それは行っていたが効果はなかったため、どうすれば良いかと悩んで試したところ、効果を発揮した方法はbodyにではなく、htmlにoverflow-xのhiddenをかけるということで解決した。
他のCSSフレームワークで用意されているメニューやoff-canvasなどの機能はどのようにしてスマホに影響なく表示できているんだろうか不思議・・・
それとも、bodyにそういう表示をしないような予めのCSSが必要なのだろうか・・・
それとも、ブラウザのバージョンアップが続いているところで何か仕様変更にでもなったのだろうか・・・
ページ全体のheightの100%を有効にするために、bodyだけでなくhtmlも含めて100%を設定しておくと、その下にあるタグにも有効になる。htmlタグにCSSを適用する必要も出てくるという事を再確認した出来事だった。