diff --git a/ts/WoltLabSuite/Core/Ui/User/Menu/View.ts b/ts/WoltLabSuite/Core/Ui/User/Menu/View.ts index c7fcea36a82..13ae473b234 100644 --- a/ts/WoltLabSuite/Core/Ui/User/Menu/View.ts +++ b/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,9 +50,14 @@ 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: () => { @@ -59,7 +65,7 @@ export class UserMenuView { this.rebuildScrollbar(); }, setup: () => { - this.usePerfectScrollbar = true; + this.usePerfectScrollbar = supportsPerfectScrollbar; this.rebuildScrollbar(); }, }); diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/User/Menu/View.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/User/Menu/View.js index 54e98c4a7c9..0ab8cc131b2 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/User/Menu/View.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/User/Menu/View.js @@ -6,11 +6,12 @@ * @license GNU Lesser General Public License * @woltlabExcludeBundle tiny */ -define(["require", "exports", "tslib", "../../../Date/Util", "../../../StringUtil", "../../../Dom/Change/Listener", "../../../Language", "focus-trap", "perfect-scrollbar", "../../Screen"], function (require, exports, tslib_1, Util_1, StringUtil_1, DomChangeListener, Language, focus_trap_1, perfect_scrollbar_1, UiScreen) { +define(["require", "exports", "tslib", "../../../Date/Util", "../../../StringUtil", "../../../Dom/Change/Listener", "../../../Environment", "../../../Language", "focus-trap", "perfect-scrollbar", "../../Screen"], function (require, exports, tslib_1, Util_1, StringUtil_1, DomChangeListener, Environment, Language, focus_trap_1, perfect_scrollbar_1, UiScreen) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.UserMenuView = void 0; DomChangeListener = tslib_1.__importStar(DomChangeListener); + Environment = tslib_1.__importStar(Environment); Language = tslib_1.__importStar(Language); perfect_scrollbar_1 = tslib_1.__importDefault(perfect_scrollbar_1); UiScreen = tslib_1.__importStar(UiScreen); @@ -40,9 +41,13 @@ define(["require", "exports", "tslib", "../../../Date/Util", "../../../StringUti }, 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: () => { @@ -50,7 +55,7 @@ define(["require", "exports", "tslib", "../../../Date/Util", "../../../StringUti this.rebuildScrollbar(); }, setup: () => { - this.usePerfectScrollbar = true; + this.usePerfectScrollbar = supportsPerfectScrollbar; this.rebuildScrollbar(); }, }); diff --git a/wcfsetup/install/files/style/ui/userMenu.scss b/wcfsetup/install/files/style/ui/userMenu.scss index fe14b50e0d1..aaad3e30424 100644 --- a/wcfsetup/install/files/style/ui/userMenu.scss +++ b/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;