ChoChoX/suwayomi-material-you-webui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Prevent custom scrollbar on iOS

Browse Source 
While iOS does not support customizing the scrollbar, it seems there is a bug when the width and/or height gets set.

(see MediaQuery#getScrollbarSize) When inserting an empty div with forced scrollbars and calculating the scrollbar size, for some reason on iOS it has a scrollbar that affects the available size, which is not possible.
This commit is contained in:
schroda
2025-01-09 00:46:25 +01:00
parent 6bbaee6d8d
commit 28eb18f88c
1 changed files with 32 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/modules/theme/services/ThemeCreator.ts
View File

@@ -21,6 +21,7 @@ import { ThemeMode } from '@/modules/theme/contexts/ThemeModeContext.tsx';
import { MediaQuery } from '@/modules/core/utils/MediaQuery.tsx'; import { MediaQuery } from '@/modules/core/utils/MediaQuery.tsx';
import { AppTheme, loadThemeFonts } from '@/modules/theme/services/AppThemes.ts'; import { AppTheme, loadThemeFonts } from '@/modules/theme/services/AppThemes.ts';
import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts'; import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';
import { applyStyles } from '@/modules/core/utils/ApplyStyles.ts';
const SCROLLBAR_SIZE = 14; const SCROLLBAR_SIZE = 14;
@@ -89,15 +90,15 @@ export const createTheme = (
typeof appTheme.muiTheme.components?.MuiCssBaseline?.styleOverrides === 'object' typeof appTheme.muiTheme.components?.MuiCssBaseline?.styleOverrides === 'object'
? { ? {
...appTheme.muiTheme.components?.MuiCssBaseline?.styleOverrides, ...appTheme.muiTheme.components?.MuiCssBaseline?.styleOverrides,
'*::-webkit-scrollbar': { '*::-webkit-scrollbar': applyStyles(CSS.supports('-webkit-touch-callout', 'none'), {
width: `${SCROLLBAR_SIZE}px`, width: `${SCROLLBAR_SIZE}px`,
height: `${SCROLLBAR_SIZE}px`, height: `${SCROLLBAR_SIZE}px`,
// @ts-ignore - '*::-webkit-scrollbar' is a valid key // @ts-ignore - '*::-webkit-scrollbar' is a valid key
...appTheme.muiTheme.components?.MuiCssBaseline?.styleOverrides?.[ ...appTheme.muiTheme.components?.MuiCssBaseline?.styleOverrides?.[
'*::-webkit-scrollbar' '*::-webkit-scrollbar'
], ],
}, }),
'*::-webkit-scrollbar-thumb': { '*::-webkit-scrollbar-thumb': applyStyles(CSS.supports('-webkit-touch-callout', 'none'), {
border: '4px solid rgba(0, 0, 0, 0)', border: '4px solid rgba(0, 0, 0, 0)',
backgroundClip: 'padding-box', backgroundClip: 'padding-box',
borderRadius: '9999px', borderRadius: '9999px',
@@ -106,16 +107,21 @@ export const createTheme = (
...appTheme.muiTheme.components?.MuiCssBaseline?.styleOverrides?.[ ...appTheme.muiTheme.components?.MuiCssBaseline?.styleOverrides?.[
'*::-webkit-scrollbar-thumb' '*::-webkit-scrollbar-thumb'
], ],
}, }),
'*::-webkit-scrollbar-thumb:hover': { '*::-webkit-scrollbar-thumb:hover': applyStyles(
CSS.supports('-webkit-touch-callout', 'none'),
{
borderWidth: '2px', borderWidth: '2px',
// @ts-ignore - '*::-webkit-scrollbar-thumb:hover' is a valid key // @ts-ignore - '*::-webkit-scrollbar-thumb:hover' is a valid key
...appTheme.muiTheme.components?.MuiCssBaseline?.styleOverrides?.[ ...appTheme.muiTheme.components?.MuiCssBaseline?.styleOverrides?.[
'*::-webkit-scrollbar-thumb:hover' '*::-webkit-scrollbar-thumb:hover'
], ],
}, },
),
} }
: ` : `
@supports not (-webkit-touch-callout: none) {
/* CSS for other than iOS devices */
*::-webkit-scrollbar { *::-webkit-scrollbar {
width: ${SCROLLBAR_SIZE}px; width: ${SCROLLBAR_SIZE}px;
height: ${SCROLLBAR_SIZE}px; height: ${SCROLLBAR_SIZE}px;
@@ -131,6 +137,7 @@ export const createTheme = (
} }
${appTheme.muiTheme.components?.MuiCssBaseline?.styleOverrides ?? ''} ${appTheme.muiTheme.components?.MuiCssBaseline?.styleOverrides ?? ''}
}
`, `,
}, },
}, },