I am working on the React MATERIAL-UI project I am facing an issue with grid Items but this issue is only happening in the safari browser, not inside the chrome or firefox.
I have a grid, Inside the grid, I have checkboxes when I click on the checkbox then the checkboxes move from one place to another this only happens inside the safari browser.
I have uploaded a video on the youtube to explain the issue it's only a 20-second video https://youtu.be/dGdayLJgLCE
Please watch the video till the end to see the issue.
<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"
/>
kindly let me know how I can fix this issue.