Screen scrolling getting stuck for React / Material UI

Question

So I am encountering a weird issue where when I am on mobile scrolling on my website gets sticky, as in sometimes it lets you scroll and others it doesn't. Cant seem to figure out why, no console errors or anything like that. Included below code for just a few of the sub grid components but I have 9, they're all identical. Written in react with material-ui.

What I think the issue is is the DOM loading just a few of the grid items, then loading more and the scroll taking time to adjust. Although what leads me to question that is when you scroll to the bottom, the same issue happens even though nothing has changed in the state.

This is hosted on firebase at https://brightspotblog-26d91.web.app/ if you would like to see the issue for yourselves.

return (
    <div className="App">
      <Grid
        container
        spacing={0}
        direction="column"
        alignItems="center"
        justify="center"
        style={{ minHeight: "100vh", overflowX: "hidden"}}
      >
        <StarfieldAnimation
          style={{
            position: "absolute",
            width: "100%",
            height: "100vh",
            zIndex: -10,
          }}
        />
        <Typography variant="h3" color="primary" style={{ padding: 25}} align="center">
          The Final Frontier
        </Typography>
        <Grid
          container
          item
          md={9}
          spacing={5}
          alignItems="center"
          direction="row"
        >
          <Grid item md={4}>
            <Card
              variant="outlined"
              style={{ backgroundColor: "transparent", borderColor: "white" }}
            >
              <CardContent>
                <Typography variant="h4" color="primary">
                  Mercury
                </Typography>
                <Typography color="primary">Terrestrial Planet</Typography>
                <Typography variant="body2" color="primary" component="p">
                Mercury is the smallest and innermost planet in the Solar System. Its orbit around the Sun takes 87.97 days, the shortest of all the planets.
                </Typography>
              </CardContent>
              <CardActions>
                <Avatar alt="Mercury" src={Mercury} />
                <div style={{ flex: 1 }} />
                <Button color="primary" variant="outlined" >
                  Learn More
                </Button>
              </CardActions>
            </Card>
          </Grid>
          <Grid item md={4}>
            <Card
              variant="outlined"
              style={{ backgroundColor: "transparent", borderColor: "white" }}
            >
              <CardContent>
                <Typography variant="h4" color="primary">
                  Venus
                </Typography>
                <Typography color="primary">Terrestrial Planet</Typography>
                <Typography variant="body2" color="primary" component="p">
                Venus is the second planet from the Sun. It is named after the Roman goddess of love and beauty. It is the second-brightest natural object in the night sky after Moon.
                </Typography>
              </CardContent>
              <CardActions>
                <Avatar alt="Venus" src={Venus}/>
                <div style={{ flex: 1 }} />
                <Button color="primary" variant="outlined" size="small">
                  Learn More
                </Button>
              </CardActions>
            </Card>
          </Grid>
          <Grid item md={4}>
            <Card
              variant="outlined"
              style={{ backgroundColor: "transparent", borderColor: "white" }}
            >
              <CardContent>
                <Typography variant="h4" color="primary">
                  Earth
                </Typography>
                <Typography color="primary">Terrestrial Planet</Typography>
                <Typography variant="body2" color="primary" component="p">
                Earth is the third planet from the Sun and the only astronomical object known to harbor life. Earth formed over 4.5 billion years ago.
                </Typography>
              </CardContent>
              <CardActions>
                <Avatar alt="Earth" src={Earth} />
                <div style={{ flex: 1 }} />
                <Button color="primary" variant="outlined" size="small">
                  Learn More
                </Button>
              </CardActions>
            </Card>
          </Grid>
          <Grid item md={4}>
            <Card
              variant="outlined"
              style={{ backgroundColor: "transparent", borderColor: "white" }}
            >
              <CardContent>
                <Typography variant="h4" color="primary">
                  Mars
                </Typography>
                <Typography color="primary">Terrestrial Planet</Typography>
                <Typography variant="body2" color="primary" component="p">
                Mars is the fourth planet from the Sun and the second-smallest planet in the Solar System, larger than only Mercury. 
                </Typography>
              </CardContent>
              <CardActions>
                <Avatar alt="Mars" src={Mars} />
                <div style={{ flex: 1 }} />
                <Button color="primary" variant="outlined" size="small">
                  Learn More
                </Button>
              </CardActions>
            </Card>
          </Grid>
        </Grid>
      </Grid>
    </div>
  );

Answer 1

try the following:

html,
body {
  width: 100%;
  margin: 0;
  padding: 0;
}

in your app.css or a global stylesheet. I know I've run into this issue a couple of times with material ui