Adding new DOM items with React in Chrome does not keep expected scroll position

Question

I came across an unexpected issue when adding new items to a state array in React, which consequently results in more items being added to the DOM. In Safari and Firefox, this results in the new DOM items being added below the fold, and I must scroll down to see the new items. In Chrome, the screen remains scrolled to the bottom of the page, and the items are added above. This means I need to scroll up to see the new items. This is obviously not the expected behaviour for lazy loading or a "load more" button to view more blog posts in a list.

See here: https://codesandbox.io/s/new-leaf-0fnv5?file=/src/App.js

A few other observations below:

1. I tried it on another Mac with Chrome, and it behaved more like Safari and Firefox but scrolled slightly up so that the last item is seen before clicking "Add more" was below the fold.
2. Given the variance between the two browsers, there must be a way to achieve a more stable, expected behaviour.
3. I've created similar "Load more" lists previously and never encountered this before. I've also never seen this behaviour on other live sites, so there clearly is something I'm doing differently that triggers Chrome to sometimes behave this way, I just don't know what.
4. I noticed one or two similar questions on SO, but none of them addressed the question of why this happens sometimes, but not all the time, in Chrome.

Any suggestions on what could be influencing Chrome to behave in this unexpected way?

Answer 1

It seems like the solution is to use the CSS overflow-anchor: none property on the body tag (or some parent div that handles the scrolling).

https://css-tricks.com/almanac/properties/o/overflow-anchor/

Answer 2

Chrome's latest update done the same for me too, been searching for a couple days, new people reporting this everyday. But given the answer above, I implemented it as a hotfix for now until they admit breaking changes

For me, I had more content loading after pressing a button at the end of the content on page, and the bug was that the button was kept in view when new content was loaded so the new content was skipped, fix works however the css property can be directly on the button like so:

const useStyles = makeStyles(theme => ({
  root: {
    flexGrow: 1,
  },
  noBrowserScrolling: {
    overflowAnchor: "none",
  }

}));

            <Button
              variant="outlined"
              color="default"
              fullWidth
              onClick={onLoadMore}
              disabled={!moreExists}
              className={classes.noBrowserScrolling}
            >
              {moreExists ? "Show More" : "No More to Load"}
            </Button>

I don't have enough points to comment so have to submit a separate answer, sorry Adam