映像UIのシークバーを動かすと横スワイプも動いてしまう

[taiyme]

💡 Summary

映像UIのシークバーを動かすと、横スワイプも動いてしまう。
※ 横スクロール可能なコードブロックでも確認

🥰 Expected Behavior

映像UIのシークバーを動かすと、映像UIのシークバーが動く

🤬 Actual Behavior

映像UIのシークバーを動かすと、映像UIのシークバーが動き、横スワイプも動く

📝 Steps to Reproduce

1. 横スワイプ可能な画面で映像UIを含むコンテンツを表示 ( /search や ルートページのメイン画面)
2. 映像UIのシークバーを動かす

💻 Frontend Environment

* Model and OS of the device(s): macOS Ventura 13.5, iOS 16.7
* Browser: Chrome 120.0 (macOS), Safari (iOS)
* Server URL: https://misskey.io/
* Misskey: 2023.12.2-io.2h

🛰 Backend Environment (for server admin)

* Installation Method or Hosting Service:
* Misskey:
* Node:
* PostgreSQL:
* Redis:
* OS and Architecture:

Do you want to address this bug yourself?

• Yes, I will patch the bug myself and send a pull request

[elysion-pre]

スワイプ可能な画面で映像UIを含むコンテンツを表示 ( /search や ルートページのメイン画面)

横に長いコードブロックのスクロールバーでもスワイプ判定されてしまい、ノート検索からユーザー検索にスライドされました（デッキモード、Android)

[kakkokari-gtyih]

当該の要素にstopPropagationをつければ解決するけどそういう実装はやりたくない（他コンポーネントへの干渉は避けたい）
うまい方法はないかしら

[kakkokari-gtyih]

当該の要素にstopPropagationをつければ解決するけどそういう実装はやりたくない（他コンポーネントへの干渉は避けたい） うまい方法はないかしら

event.targetの要素から再帰的に一つずつ要素を見ていって、横方向へのドラッグやoverflowがあるものが存在するかを見ていくわけにもいかないし・・・

[1STEP621]

@event.captureでイベントの伝搬を逆にすることでなんとかならないでしょうか...？ 無理そう

[kakkokari-gtyih]

event.targetの要素から再帰的に一つずつ要素を見ていって、横方向へのドラッグやoverflowがあるものが存在するかを見ていくわけにもいかないし・・・

結局これで実装した

/** 横スワイプに関与する可能性のある要素を調べる */
function hasSomethingToDoWithXSwipe(el: HTMLElement) {
	if (['INPUT', 'TEXTAREA'].includes(el.tagName)) return true;
	if (el.isContentEditable) return true;
	if (el.scrollWidth > el.clientWidth) return true;

	const style = window.getComputedStyle(el);
	if (['absolute', 'fixed', 'sticky'].includes(style.position)) return true;
	if (['scroll', 'auto'].includes(style.overflowX)) return true;
	if (style.touchAction === 'pan-x') return true;

	if (el.parentElement && el.parentElement !== rootEl.value) {
		return hasSomethingToDoWithXSwipe(el.parentElement);
	} else {
		return false;
	}
}