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

FRONTEND

2019.04.13

2019.04.17

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

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

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みたい。

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