iPhoneで下にスクロールするとナビゲーションが見えてしまう不具合を解消


スマホサイトで右上にメニューボタンがあり、メニューボタンをタップすると下に隠れているナビゲーションが表示されるサイトを作成しました。
そしたら、iPhoneで見ると不具合があるとの報告が!?

iPhoneで下にスクロールすると、ナビゲーションの上に重ねてあるページ全体が下にずれて、隠れていたナビゲーションが表示されてしまうというのです。


 
Androidで同じような操作をしても、ページ全体が下にずれることはないので隠れていたナビゲーションが見えることはありません。

構造としてはこんな風になっています。


 

HTML

<nav class="side-menu">
  <ul>
    <li><a href="#">カテゴリー1</a></li>
    <li><a href="#">カテゴリー2</a></li>
    <li><a href="#">カテゴリー3</a></li>
  </ul>
</nav>
<div class="wrapper">
  <!-- ここにメニューボタンなどを配置 -->
</div>

 

CSS

.side-menu {
  position: fixed;
  top: 0;
  right: 0;
  width: 60%;
  height: 100%;
  font-size: 13px;
  background: #000;
  z-index: 1;
}
.wrapper {
  position: relative;
  width: 100%;
  font-size: 13px;
  background: #fff;
  z-index: 2;
}

 

問題だったのは、ナビゲーション部分がposition: fixed;なこと。
position: absolute;にしたらiPhoneで下にスクロールしてもナビゲーションが見えなくなりました。



簡単に解決してよかったです。
 

新入社員の頃にシステムエンジニアの会社に入社。その後、WEB制作系の仕事に転職しました。

くるりんをフォローする
html・css
スポンサーリンク
くるりんをフォローする
Memorandums