Flex Gap is not supported for Safari < 14.1, and iOS Safari < 14.5 but used in mantine components (@mantine/core v5):
- Carousel:
indicators: {gap: 8}
- Group:
root: { gap: theme.fn.size({ size: spacing, sizes: theme.spacing }) } -- fixed
- Stack:
root: { gap: theme.fn.size({ size: spacing, sizes: theme.spacing }) } -- fixed
- Tabs (TabList):
tabsList: {... if (variant === 'pills') { return { gap: theme.spacing.sm / 2, }; } ... } -- fixed
- Calendar (CalendarBase):
calendarBase: {gap: theme.spacing.md}
Workaround: Group and Stack components is a base for most Mantine components. Flex component not uses global config styles, and used for their demos, so just not use it in your codebase.
To fix Group and Stack components add this code to config in provider:
const themeConfig: MantineThemeOverride = {
components: {
Group: {
styles: (theme: MantineTheme, { spacing }: GroupStylesParams) => {
return {
root: {
gap: 0,
marginRight: -theme.fn.size({ size: spacing, sizes: theme.spacing }),
marginBottom: -theme.fn.size({ size: spacing, sizes: theme.spacing }),
'> *': {
marginRight: theme.fn.size({ size: spacing, sizes: theme.spacing }),
marginBottom: theme.fn.size({ size: spacing, sizes: theme.spacing }),
},
},
};
},
},
Stack: {
styles: (theme: MantineTheme, { spacing }: StackStylesParams) => {
return {
root: {
gap: 0,
marginBottom: -theme.fn.size({ size: spacing, sizes: theme.spacing }),
'> *': {
marginBottom: theme.fn.size({ size: spacing, sizes: theme.spacing }),
},
},
};
},
},
Tabs: {
styles: (theme, { variant, color }: TabsStylesParams) => {
const filledScheme = theme.fn.variant({ color, variant: 'filled' });
let tabStyles = {};
let tabListStyles = {};
if (variant === 'pills') {
const spacing = theme.spacing.sm; // In mantine is hardcoded now (https://github.com/mantinedev/mantine/blob/master/src/mantine-core/src/Tabs/TabsList/TabsList.styles.ts#L46)
tabListStyles = {
gap: 0,
marginRight: -spacing,
marginBottom: -spacing,
'> *': {
marginRight: spacing,
marginBottom: spacing,
},
};
}
return {
tab: tabStyles,
tabsList: tabListStyles,
};
},
},
},
}
Known limitations
- Must use a wrapper div when using
margin: auto or background or when you need to make some space between container and next element. Also this may have issues in cases when some code calculates scrollHeight - it will be larger than expected by the size of gap (spacing on the bottom despite the fact that it is absorbed by the parent negative it will be calculated).
- Percentage gaps aren't reliable if the container is not full width of parent container
- Width of flex items with percentages vary slightly from spec because of negative margin on container.
Advanced approach: You can use modernizr config to add custom classes to the html element, so you can apply fallback values only for browsers that doesn't support flex gap.
modernizr-config.json
{
"classPrefix": "_",
"enableClasses": true,
"enableJSClass": true,
"scriptGlobalName": "window",
"usePrefixes": true,
"minify": true,
"options": [
"addTest",
"testProp",
"setClasses"
],
"feature-detects": [
"css/flexgap",
]
}
package.json
"scripts": {
"compile-modernizr": "modernizr -c modernizr-config.json -d ./public/static/scripts/modernizr-bundle.min.js"
}
_document.tsx
<body>
<Main />
<NextScript />
<Script src="/static/scripts/modernizr-bundle.min.js" strategy="beforeInteractive" />
</body>
After this, change your theme-config like this
Group: {
styles: (theme: MantineTheme, { spacing }: GroupStylesParams) => {
return {
root: {
'._no-flexgap &': {
gap: 0,
marginRight: -theme.fn.size({ size: spacing, sizes: theme.spacing }),
marginBottom: -theme.fn.size({ size: spacing, sizes: theme.spacing }),
},
'._no-flexgap & > *': {
marginRight: theme.fn.size({ size: spacing, sizes: theme.spacing }),
marginBottom: theme.fn.size({ size: spacing, sizes: theme.spacing }),
},
},
};
},
},
Stack: {
styles: (theme: MantineTheme, { spacing }: StackStylesParams) => {
return {
root: {
'._no-flexgap &': {
gap: 0,
marginBottom: -theme.fn.size({ size: spacing, sizes: theme.spacing }),
},
'._no-flexgap & > *': {
marginBottom: theme.fn.size({ size: spacing, sizes: theme.spacing }),
},
},
};
},
},
Similar way in other cases.
So, with this optional fallback you always keep use an additional wrapper (a div) around your elements that uses gap for best backward compatibility.
I hope this helps you!
