縦向きスライドショー、Pull-to-Refreshに引っかかる

vue.jsで縦並びスライドショー作ったんだけど、AndroidのChromeで1つ前のスライドに戻るために上スクロールするとブラウザのリロードが走るんですが(怒)

このページ上部にいる時に上スクロールを倍プッシュするとブラウザがリロードされる機能は、Pull-to-RefreshというAndroidChromeの機能らしい。ちょっと調べてみるとこの機能に対する怒りの意見がいろんなところで見受けられた。Googleにこんなにエンジニアから反感を買うような機能があるって珍しいよね。

解決方法を探す

まず見つかったのはquiitaのこの記事
[Chrome for Android] Pull-to-Refreshをページ側で無効化する
これやると治るんだけど、
今回スライド導入したいサイトがPWAだったので、この方法だと他ページに影響が出てしまうことが判明。で、スライドショーの全体囲ってるとこにタップ系の動作を制御するcss「touch-action: pan-down;」を追加することで解決〜。
canIuseでtouch-actionがChromeAndroidで問題なく使えることを確認済み。
CSS touch-action property