当我们在 safari 浏览器上单击它们时，网格项目正在改变位置 react material-ui

Posted 2023-02-22

【中文标题】当我们在 safari 浏览器上单击它们时，网格项目正在改变位置 react material-ui

【英文标题】：Grid Items are changing places when we click on them on safari browser react material-ui

【发布时间】：2020-07-15 01:51:17

【问题描述】：

我正在处理 React MATERIAL-UI 项目我遇到了网格项的问题，但这个问题只发生在 safari 浏览器中，而不是在 chrome 或 firefox 中。

我有一个网格，在网格内部，当我单击复选框时，我有复选框，然后复选框从一个位置移动到另一个位置，这只发生在 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"
        />

请告诉我如何解决此问题。

【问题讨论】：

尝试检查 html/CSS 并查看单击时是否有任何变化

是的，当我单击复选框 MuiButtonBase-root MuiIconButton-root jss330 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary 时，我已经检查了这些类的变化

但它在 chrome 和 firefox 中运行良好，但在 safari 中无法运行。

没有更多关于 html/css/scripts 的信息是不可能知道发生了什么

这是我的网站survey.wellmode.com 如果你点击开始按钮然后点击冥想远足消息按钮然后点击下一步然后你会看到复选框页面问题在复选框页面上。跨度>

【参考方案1】：

你可以尝试把它放在 CSS 中，看看这是否有效： -webkit-appearance: none!important;

【讨论】：

这没有提供问题的答案。一旦你有足够的reputation，你就可以comment on any post；相反，provide answers that don't require clarification from the asker。 - From Review