Grid Items are changing places when we click on them on safari browser react material-ui

Viewed 524

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.

1 Answers

u can try putting this in the CSS, see if this works: -webkit-appearance: none!important;

Related