Элементы сетки меняются местами, когда мы нажимаем на них в браузере Safari. - PullRequest
Новая
       27

Элементы сетки меняются местами, когда мы нажимаем на них в браузере Safari.

0 голосов
/ 03 апреля 2020

Я работаю над проектом React MATERIAL-UI. У меня проблема с элементами сетки, но эта проблема возникает только в браузере Safari, а не внутри chrome или firefox.

I. есть сетка, Внутри сетки у меня есть флажки, когда я нажимаю на флажок, затем флажки перемещаются из одного места в другое, это происходит только внутри браузера Safari.

Я загрузил видео на YouTube, чтобы объяснить проблема только в 20-секундном видео https://youtu.be/dGdayLJgLCE

Пожалуйста, посмотрите видео до конца, чтобы увидеть проблему. 

<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"
        />

пожалуйста, дайте мне знать, как Я могу исправить эту проблему.

...