CSSのtouch-actionプロパティを設定しているサイトでjQueryプラグインを使ったときにハマった話です。
touch-actionプロパティとは
タッチデバイスにおいてユーザーの操作を制御できるプロパティです。
詳しい内容についてはこちらを参照してください。
ハマったときの状況
タッチデバイスへの対応として、CSSで以下のようにtouch-actionプロパティを設定していました。
body {
-ms-touch-action: manipulation;
touch-action: manipulation;
}
その上で、Swipeboxを設置しました。
スマートフォンで表示を確認すると・・・
画像が拡大表示されたとき、フォーカスが外れず画面全体が青くなってしまいました。
ちなみにSwipebox以外のlightbox系プラグインをいくつか試しましたが同じでした。
解決策
body全体にtouch-actionプロパティを設定していたのが原因のようで、以下のように要素を限定すると問題なく動作します。
a,area,button,[role="button"],input:not([type=range]),
label,select,summary,textarea {
-ms-touch-action: manipulation;
touch-action: manipulation;
}