仕事中に遭遇した障害についてのメモ。iOS13(ベータ版)とAndroid 9で検知した。
発生事象
Ionic(Angular)のGestureを使ってピンチイン・ピンチアウトによるズームを有効にしている画面で、縦方向のスクロールができなくなる障害が発生した。
原因
Ionic(Angular)のGesture機能で呼び出しているライブラリ、Hammer.jsが障害の原因となる。
特定のiOS, Androidのバージョンでスクロールができなくなることを確認した。
対応
Gesturte機能(Hammer.js)を使用しているタグに対して、[style.touch-action]="'pan-y'"を追加することで障害を改修した。
Hammer.jsによって無効になった縦方向のタッチアクションの検出をCSS[style.touch-action]="'pan-y'"で有効にすることによって、スクロールを検知できるようにしている。
- 対応コードの例
pinchZoomはHammer.jsを使用しているAngularのカスタムディレクティブとなる。
<div [style.touch-action]="'pan-y'" pinchZoom>
バージョン情報
- Angular: 5.0.1
- Ionic: 3.9.5
参考サイト
Hammer blocking scroll · Issue #10541 · angular/angular · GitHub
Scrolling disabled on Hammer.js element · Issue #1014 · hammerjs/hammer.js · GitHub
