Issues with screen scrolling becoming stuck in React and Material UI

Currently facing an unusual issue where scrolling on my mobile website becomes sticky, with intermittent responsiveness to touch. Struggling to identify the root cause as there are no console errors detected. Provided below is a snippet of code for a subset of grid components, although there are a total of 9 identical components. Developed using React with Material-UI.

I suspect that the problem lies in the loading of only a few grid items within the DOM initially, followed by subsequent loading causing delays in adjusting the scrolling behavior. However, it's puzzling that the same issue persists when reaching the bottom, even though there are no changes in the state.

The site is hosted on Firebase at if you would like to observe the issue firsthand.

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>
  );
htmlcssreactjsmaterial-ui

Answer №1

Give this a shot:

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

Add the above code snippet to your app.css file or any global stylesheet. I've encountered similar problems with material ui before, so this might help.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can I dynamically apply an active class when clicking on a group of buttons?

Iterating through the buttons array, I retrieve three buttons. My goal is to determine which button has been clicked and apply an active class to it. import React from "react"; import { useState } from "react"; import style from "./years.module.scss"; co ...

javascriptreactjsecmascript-6

Applying the jqtransform plugin to all forms except for one

We've implemented the jQuery jqtransform plugin to enhance the appearance of our website's forms. However, there is one particular form that we'd like to exclude from this transformation. I made adjustments to the script that applies jqtrans ...

javascriptcssformsjqtransform

The curious behavior of JavaScript object fields in Chrome

Attempting to update the targetRow's field with a variable converted from a string to a number is resulting in strange output in Chrome's console: targetRow[fieldName] = Number(value); console.log(targetRow[fieldName]); // = ...

javascriptjsonreactjs

Customizing font sizes for individual fonts within the same font family

I am designing a website in a language other than English. This means that the text on the webpage will be a mixture of English and other languages. In order to make sure the text displays correctly, I have set the font-family like this: p{ font-family: ...

cssfonts

Align Inline Typography Component to the right in Material UI v5

After upgrading to MUI Version 5.4, I noticed that my Inline Typography no longer aligns correctly. In the previous version (MUI Version 4), this code worked fine: <Grid container xs={12}> <Grid container xs={12} justify="space-between&quo ...

reactjsmaterial-uitypographytext-align

How can I clear the div styling once the onDismiss handler has been triggered

Seeking assistance with resetting a div on a Modal after it has been closed. The issue I am facing with my pop-up is that the div retains the previous styling of display: none instead of reverting to display: flex. I have searched for a solution without su ...

javascriptreactjstypescriptpopup

Is there a way to display a foundation.css drop-down menu using jQuery?

After attempting to create a navigation bar using foundation.css, I encountered an issue where the sub-menu does not appear when hovering over it with the mouse. The main question at hand is how to display the sub-menu of test on this specific webpage. D ...

javascriptjqueryhtmlcss

Switch up the linear gradient background periodically

Is there a way to change the background after a certain amount of time? It seems to work fine if the background color is just a solid color, but when it's a gradient as shown in the code below, the solution doesn't seem to work. Any suggestions f ...

javascriptjquerycsshtml

Issue with Android date input field not resetting the value

When testing in Android Tablet (version 4.1.2), I encountered a strange issue with an input date field that looks like this: <input type="date" value="2013-06-10"/>. Upon clicking on the field and trying to set a new date, instead of replacing the o ...

javascriptandroidhtmldatepicker

`Unable to activate label function in HTML`

As I dabble around with HTML and CSS, I've been experimenting with creating a custom file selection button. I came across a method on the internet that involves hiding the original button and superimposing a new one over it using the following code: ...

htmlcss

Revise HTML form using variable obtained from prior form

I thought this would be a simple task, but for some reason I can't seem to figure it out and my online searches have been unfruitful. So here's the situation: My website consists of three pages. On the first page, the user fills out a form which ...

htmldjangoforms

Is it possible to create a Flutter project incorporating various UI packages tailored for specific platforms?

I am interested in creating a Flutter project that can be tailored for different platforms: Windows using Fluent UI macOS using MacOS UI Mobile apps using Material UI While the inner content will remain consistent across all platforms, I understand that ...

fluttermaterial-uifluent-ui

What is the best way to place tfoot at the top of the table

Below is the structure of my table: https://i.stack.imgur.com/QmlVn.png In the table, there are search input fields at the bottom of each column. I would like to move them to the top, right after the <thead> </thead>. The basic HTML code for ...

htmlcsshtml-table

Navigating to the end of the fixed-height table while inserting new elements

I'm experiencing an issue with a function that adds new items to a table with fixed height and overflow: auto set. When new items are added, the scroll should immediately go to the bottom of the table. Unfortunately, this is not happening as expected. ...

htmlvue.jsvuetify.js

Notifying Users of JavaFX Applet Web Page Refresh and Closure

Is there a way to detect when a user closes or refreshes a web page with a JavaFX applet embedded in it? I need to perform some clean-up tasks in my code when these events occur. In the past, Java Applet had callback methods for this purpose. How can I ac ...

javahtmlbrowserappletjavafx

Customizing the layout of a Bootstrap carousel by adding HR lines both above and

I have set up a bootstrap carousel to showcase numerous images, with the carousel indicators serving as image icons. I am looking to add horizontal lines above and below these icons. How can I achieve this? Currently, the icons functioning as carousel ind ...

htmlcsstwitter-bootstrapbootstrap-4

Improving the pagination performance in AngularJS

I created an HTML template to showcase member details, along with adding pagination functionality to improve initial load time. Currently, I retrieve 15 members from the server at once and display them, allowing users to navigate through more members using ...

javascriptjqueryhtmlangularjspagination

Add a specific CSS class to a div element depending on the status of a checkbox

Is there a way to dynamically append data based on the selected items in a checkbox table? I want to be able to add multiple or single items by clicking the add button. The key is to avoid appending duplicate data that already exists in the view. Any sugge ...

javascripthtmljquery

Steps to adding a collection of links (stylesheets, javascript files) to each html document

Is it feasible to add a list of links to multiple HTML files? I was inspired by W3 School's W3 Include functionality, which allows you to import blocks of HTML code into various files simultaneously, making it convenient for making changes across many ...

javascripthtmlcss

Create a layout using CSS that features two columns. The left column should be fluid, expanding to fill all remaining space, while the right column should be fixed

I need to ensure that the Online Users div always remains at a fixed size of 200px, while allowing the chat window next to it to resize dynamically based on available space. Essentially, I want the chat window to adjust its width as the window is resized, ...

javascripthtmlcss