fix: iPadでdeck uiでマウスホイールでスクロールできない

CHANGELOG.md

@@ -7,6 +7,7 @@
 ### Client
 - Fix: 一部環境でセンシティブなファイルを含むノートの非表示が効かない問題 
 - Fix: データセーバー有効時にもユーザーページの「ファイル」タブで画像が読み込まれてしまう問題を修正
+- Fix: iPadOSでdeck uiをマウスカーソルによってスクロールできない問題を修正
 
 ### Server
 - Fix: 個別お知らせページのmetaタグ出力の条件が間違っていたのを修正

packages/frontend/src/ui/deck.vue

@@ -10,13 +10,14 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<div :class="$style.main">
 		<XAnnouncements v-if="$i"/>
 		<XStatusBars/>
-		<div ref="columnsEl" :class="[$style.sections, { [$style.center]: deckStore.reactiveState.columnAlign.value === 'center', [$style.snapScroll]: snapScroll }]" @contextmenu.self.prevent="onContextmenu" @wheel.self="onWheel">
+		<!-- passive: https://bugs.webkit.org/show_bug.cgi?id=281300 -->
+		<div ref="columnsEl" :class="[$style.sections, { [$style.center]: deckStore.reactiveState.columnAlign.value === 'center', [$style.snapScroll]: snapScroll }]" @contextmenu.self.prevent="onContextmenu" @wheel.passive.self="onWheel">
 			<!-- sectionを利用しているのは、deck.vue側でcolumnに対してfirst-of-typeを効かせるため -->
 			<section
 				v-for="ids in layout"
 				:class="$style.section"
 				:style="columns.filter(c => ids.includes(c.id)).some(c => c.flexible) ? { flex: 1, minWidth: '350px' } : { width: Math.max(...columns.filter(c => ids.includes(c.id)).map(c => c.width)) + 'px' }"
-				@wheel.self="onWheel"
+				@wheel.passive.self="onWheel"
 			>
 				<component
 					:is="columnComponents[columns.find(c => c.id === id)!.type] ?? XTlColumn"
@@ -150,7 +151,8 @@ window.addEventListener('resize', () => {
 	isMobile.value = window.innerWidth <= 500;
 });
 
-const snapScroll = deviceKind === 'smartphone' || deviceKind === 'tablet';
+// ポインターイベント非対応用に初期値はUAから出す
+const snapScroll = ref(deviceKind === 'smartphone' || deviceKind === 'tablet');
 const drawerMenuShowing = ref(false);
 
 /*
@@ -201,7 +203,16 @@ const onContextmenu = (ev) => {
 	}], ev);
 };
 
+// タッチでスクロールしてるときはスナップスクロールを有効にする
+function pointerEvent(ev: PointerEvent) {
+	snapScroll.value = ev.pointerType === 'touch';
+}
+
+document.addEventListener('pointerdown', pointerEvent);
+
 function onWheel(ev: WheelEvent) {
+  // WheelEvent はマウスからしか発火しないのでスナップスクロールは無効化する
+  snapScroll.value = false;
 	if (ev.deltaX === 0 && columnsEl.value != null) {
 		columnsEl.value.scrollLeft += ev.deltaY;
 	}

packages/frontend/src/ui/deck/column.vue

@@ -17,7 +17,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		@dragstart="onDragstart"
 		@dragend="onDragend"
 		@contextmenu.prevent.stop="onContextmenu"
-		@wheel="emit('headerWheel', $event)"
+		@wheel.passive="emit('headerWheel', $event)"
 	>
 		<svg viewBox="0 0 256 128" :class="$style.tabShape">
 			<g transform="matrix(6.2431,0,0,6.2431,-677.417,-29.3839)">