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

57
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,31 +107,37 @@ 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(
borderWidth: '2px', CSS.supports('-webkit-touch-callout', 'none'),
// @ts-ignore - '*::-webkit-scrollbar-thumb:hover' is a valid key {
...appTheme.muiTheme.components?.MuiCssBaseline?.styleOverrides?.[ borderWidth: '2px',
'*::-webkit-scrollbar-thumb:hover' // @ts-ignore - '*::-webkit-scrollbar-thumb:hover' is a valid key
], ...appTheme.muiTheme.components?.MuiCssBaseline?.styleOverrides?.[
}, '*::-webkit-scrollbar-thumb:hover'
],
},
),
} }
: ` : `
*::-webkit-scrollbar { @supports not (-webkit-touch-callout: none) {
width: ${SCROLLBAR_SIZE}px; /* CSS for other than iOS devices */
height: ${SCROLLBAR_SIZE}px; *::-webkit-scrollbar {
} width: ${SCROLLBAR_SIZE}px;
*::-webkit-scrollbar-thumb { height: ${SCROLLBAR_SIZE}px;
border: 4px solid rgba(0, 0, 0, 0); }
background-clip: padding-box; *::-webkit-scrollbar-thumb {
border-radius: 9999px; border: 4px solid rgba(0, 0, 0, 0);
background-color: ${colorTheme.palette.primary[isDarkMode ? 'dark' : 'light']}; background-clip: padding-box;
} border-radius: 9999px;
*::-webkit-scrollbar-thumb:hover { background-color: ${colorTheme.palette.primary[isDarkMode ? 'dark' : 'light']};
border-width: 2px; }
} *::-webkit-scrollbar-thumb:hover {
border-width: 2px;
}
${appTheme.muiTheme.components?.MuiCssBaseline?.styleOverrides ?? ''} ${appTheme.muiTheme.components?.MuiCssBaseline?.styleOverrides ?? ''}
}
`, `,
}, },
}, },