diff --git a/core/src/components/action-sheet/action-sheet.scss b/core/src/components/action-sheet/action-sheet.scss index 1c8ff8a6600..460c91a8cc4 100644 --- a/core/src/components/action-sheet/action-sheet.scss +++ b/core/src/components/action-sheet/action-sheet.scss @@ -142,8 +142,22 @@ background: var(--background); } -.action-sheet-group::-webkit-scrollbar { - display: none; +/** + * Scrollbars on mobile devices will be hidden. + * Users can still scroll the content by swiping. + * If a user has a fine pointing device, such as a + * mouse or trackpad, then scrollbars will be + * visible. This allows users to scroll the + * content with their pointing device. + * Otherwise, the user would have to use the + * keyboard to navigate through the options. + * This may not be intuitive for users who + * are not familiar with keyboard navigation. + */ +@media (any-pointer: coarse) { + .action-sheet-group::-webkit-scrollbar { + display: none; + } } .action-sheet-group-cancel { diff --git a/core/src/components/alert/alert.scss b/core/src/components/alert/alert.scss index 0ff4caf3d8b..b6e79dfa2a2 100644 --- a/core/src/components/alert/alert.scss +++ b/core/src/components/alert/alert.scss @@ -91,10 +91,24 @@ overscroll-behavior-y: contain; } -.alert-checkbox-group::-webkit-scrollbar, -.alert-radio-group::-webkit-scrollbar, -.alert-message::-webkit-scrollbar { - display: none; +/** + * Scrollbars on mobile devices will be hidden. + * Users can still scroll the content by swiping. + * If a user has a fine pointing device, such as a + * mouse or trackpad, then scrollbars will be + * visible. This allows users to scroll the + * content with their pointing device. + * Otherwise, the user would have to use the + * keyboard to navigate through the options. + * This may not be intuitive for users who + * are not familiar with keyboard navigation. + */ +@media (any-pointer: coarse) { + .alert-checkbox-group::-webkit-scrollbar, + .alert-radio-group::-webkit-scrollbar, + .alert-message::-webkit-scrollbar { + display: none; + } } .alert-input {