L08084のブログ

中安拓也のブログ

【障害メモ】[ionic-v3][iOS]ion-pickerとion-modalを両方開くとion-modalを閉じることができなくなる

はじめに

クリックイベントが検知されないときって、ほかのDOM要素が覆っていないかとか、z-indexの設定とかしか気にしていなかったんですが、 posinter-events: noneが設定されていたせいでクリックができないケースに遭遇したので備忘録としてメモします。

環境

  • cordova (Cordova CLI) : 8.0.0
  • Ionic Framework : ionic-angular 3.9.5
  • iOS 13

発生した障害

iOS端末で検知、Ionicのドラムロール(ion-picker)を開いた状態でモーダル(ion-modal)も開くと、モーダル上のボタンが押下できなくなる

原因

ドラムロールを開いた時に適用されるCSSにpointer-events: noneが含まれていたため、クリックイベントが無効になっていた

修正方法

画面全体にかかっているpointer-events: noneによってタップイベントがすべてキャンセルされているため、pointer-events: autoを設定することでpointer-events: noneを解除した。

.disable-scroll {
  .ion-page {
    pointer-events: auto;
  }
}

まとめ

クリックイベントを検出できないバグの時に、z-indexの設定を気にするだけでなく、pointer-events:noneになっている可能性も疑うべしという教訓を得た

参考サイト

[iOS 12.2 Beta & Scrolling] Scrolling Freeze Issue with iOS 12.2 Beta · Issue #984 · ionic-team/ionic-v3 · GitHub

pointer-events - CSS: カスケーディングスタイルシート | MDN