Use native scrolling for the user menu on touch devices

ts/WoltLabSuite/Core/Ui/User/Menu/View.ts

@@ -11,6 +11,7 @@ import { UserMenuButton, UserMenuData, UserMenuFooter, UserMenuProvider } from "
 import { getTimeElement } from "../../../Date/Util";
 import { escapeHTML } from "../../../StringUtil";
 import * as DomChangeListener from "../../../Dom/Change/Listener";
+import * as Environment from "../../../Environment";
 import * as Language from "../../../Language";
 import { createFocusTrap, FocusTrap } from "focus-trap";
 import PerfectScrollbar from "perfect-scrollbar";
@@ -49,17 +50,22 @@ export class UserMenuView {
       fallbackFocus: this.element,
     });
 
+    // Perfect Scrollbar emulates the scrolling through touch events which
+    // causes iOS to suppress the synthesized `click` event of the next tap.
+    // Touch devices must use the native scrolling instead.
+    const supportsPerfectScrollbar = Environment.platform() === "desktop";
+
     UiScreen.on("screen-lg", {
       match: () => {
-        this.usePerfectScrollbar = true;
+        this.usePerfectScrollbar = supportsPerfectScrollbar;
         this.rebuildScrollbar();
       },
       unmatch: () => {
         this.usePerfectScrollbar = false;
         this.rebuildScrollbar();
       },
       setup: () => {
-        this.usePerfectScrollbar = true;
+        this.usePerfectScrollbar = supportsPerfectScrollbar;
         this.rebuildScrollbar();
       },
     });

wcfsetup/install/files/style/ui/userMenu.scss

@@ -103,6 +103,13 @@ html:not(.touch) .userMenuButton {
 	}
 }
 
+/* Touch devices do not use Perfect Scrollbar, they rely on the native scrolling. */
+html.mobile .userMenuContent.userMenuContentScrollable {
+	@include screen-lg {
+		overflow: hidden auto;
+	}
+}
+
 .userMenuItem {
 	background-color: var(--wcfUserMenuBackground);
 	display: grid;