【Sticky.js】PCでChromeのスマホプレビューでは問題ないのに実機で確認すると不具合が生じる

Question

こんにちは。

sticky.jsで固定ヘッダーを実装しているのですが、どうしても不具合が生じます。

【内容】
・sticky.jsで固定ヘッダーを実装
・スクロール無しの場合はプレビュー / 実機ともに正常に動作
・PCでGoogle Chromeでプレビュー表示をしてみると正常に動作する
・実機でスクロール時のみ、下記画像のようにメニューが全部表示されない。
・実機のOSはiOS 10.3.3
・実機ブラウザはGoogle Chrome、Safari両方にて問題が発生します。

問題のWebサイトを、内容をぼかして作ってみました。
http://browseworks.jp/text/index.html

スマホで実機で表示してみるとこうなります。

メニューが見えていないだけで、タップすると反応します。

おそらく、z-indexやsticky.jsで挿入されるheightの問題かと思うのですが、何をどうしてもいまいち解決しません。

恐れ入りますが、ご教授くださいますと幸いです。

よろしくお願いいたします。

Comments

[karamarimo]

「実機」のOSとブラウザを書いてください。

[soma]

コメントありがとうございます。OSはiOS 10.3.3、ブラウザはChrome・Safari両方において問題が発生します。よろしくお願いいたします。

Answer 1

div.wrapper内に.headerlogo(上のバー)と.drawer-nav(右から出てくるメニュー)が存在しており、.wrapperがoverflow: hidden、.drawer-navがposition: fixedとなっています。

本来ならfixed要素はoverflow: hiddenな要素の中にあっても表示領域が制限されることはないらしい[1]ですが、iOSのブラウザではバグでそうなっていないのかもしれません([2]にも同様の報告)。

.wrapper {
  overflow: visible;
}

としてみてはどうでしょうか。

参考
[1]https://stackoverflow.com/questions/12463658/parent-child-with-position-fixed-parent-overflowhidden-bug
[2]https://stackoverflow.com/questions/21414941/position-fixed-element-cut-off-by-parent-element-overflowhidden-ios7-mobile

Comments

[soma]

回答ありがとうございました！
解決しました！