iPhone上でのDrawer.jsの不具合を修正する方法

2019.04.13

2019.04.17

Warning: Undefined variable $nlink in /home/mdesigny/mdesign-y.com/public_html/wp-content/themes/mdesign/functions.php on line 94

以前下記の記事で紹介したDrawer.jsですが、iPhoneでの不具合があるようです。不具合の内容は、ドロワー内のメニューをスクロールしようとすると、メニューが閉じてしまうというもの。

簡単にドロワーメニューを実装できるDrawer.js

レスポンシブデザインが当たり前のようになってきたここ数年。ユーザーによってサイトやページの閲覧環境がこれだけ違ってくれば、まあ当然の流れだと思います。今回紹介するDrawer.jsは、その名の通りドロワーメニューを実装するためのjavascriptライブラリです。レスポンシブデザインではメニューの置き方、見せ方に悩むことがよくあると思いますが、このDraw ...

PCやAndroidでは確認できない不具合なのですが、どうやらiOSのアップグレードに伴って発生し始めた不具合みたいです。僕自身iPhoneはつかっていないのでよくわかりませんが。

今回はその修正方法です。

解決方法はCSSを追記するだけ

修正方法は簡単で、以下のCSSを追記するだけです。

.drawer--top.drawer-open .drawer-nav {
  top: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.drawer--left.drawer-open .drawer-nav,
.drawer--left .drawer-hamburger,
.drawer--left.drawer-open .drawer-navbar .drawer-hamburger {
  left: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.drawer--right.drawer-open .drawer-nav,
.drawer--right .drawer-hamburger,
.drawer--right.drawer-open .drawer-navbar .drawer-hamburger {
  right: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

drawer.cssに直接追記しても良いのですが、CDNで読み込んでいる場合は他のCSSに追記しても問題無いようです。とりあえず、読み込めばOKみたい。

この不具合、最近制作して実装したサイトでは確認できなかったのですが、昨年制作したサイトでは見受けられました。ちょっと前につかったことがあるかも、という方は一度確認した方が良いかも知れません。