I've encountered an issue with grid Items in my React MATERIAL-UI project, specifically in the Safari browser. The problem does not occur in Chrome or Firefox.
Within the grid, there are checkboxes that move from one place to another when clicked, a behavior unique to Safari.
To better illustrate the issue, I've created a 20-second video on YouTube: https://youtu.be/dGdayLJgLCE
Please watch the video until the end to see the problem in action.
<Box mt={6}>
<Container
maxWidth="md"
>
<Grid container justify="space-around" alignItems="center" >
{_map(_omit(activities, "other"), (selection, activity) => {
const handleClick = experienceLevel => () =>
toggleExperience(experienceLevel, activity);
return (
<Box m={1} key={activity}>
<Grid
item
container
// justify="left"
// alignItems="left"
justify="center"
alignItems="center"
direction="column"
className={classes.item}
wrap={"nowrap"}
style={{ width: "100%" }}
// shrink={false}
>
<Typography variant="h5" component="h5" gutterBottom>
{activity}
</Typography>
<FormGroup>
<FormControlLabel
control={
<Checkbox
checked={selection === "beginner"}
onChange={handleClick("beginner")}
name="beginner"
// shrink={false}
/>
}
label="beginner"
/>
<FormControlLabel
control={
<Checkbox
checked={selection === "intermediate"}
onChange={handleClick("intermediate")}
name="intermediate"
// shrink={false}
/>
}
label="intermediate"
/>
<FormControlLabel
control={
<Checkbox
checked={selection === "advanced"}
onChange={handleClick("advanced")}
name="advanced"
// shrink={false}
/>
}
label="advanced"
/>
</FormGroup>
</Grid>
</Box>
);
})}
</Grid>
<Grid container justify="center" alignItems="center">
<Box mt={3} className={classes.textFieldContainer}>
<Typography variant="body1" component="h3" gutterBottom>
Describe the other activities you are interested in:
</Typography>
<TextField
fullWidth
id="outlined-multiline-static"
multiline
rows="4"
placeholder="Let us know!"
variant="outlined"
color="secondary"
onChange={handleChange}
/>
</Box>
</Grid>
</Container>
</Box>
<NextBtn
disable={_includes(activities, false)}
href="/registration/14"
/>
If you have any insights on how to resolve this issue, please let me know.