[Masonry] Screen scrolls to top on appending new Masonry items in Firefox

[Baribj]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Steps to reproduce 🕹

Link to live example: https://codesandbox.io/p/sandbox/mui-masonry-firefox-bug-8l95p4?file=%2Fpages%2Findex.js&selection=%5B%7B%22endColumn%22%3A15%2C%22endLineNumber%22%3A34%2C%22startColumn%22%3A15%2C%22startLineNumber%22%3A34%7D%5D

Tip: click on the two squares icon on the top right of the preview browser in codesanbox to open a preview in your browser. Then copy the link to Chrome/Firefox to see the different behavior. (or just open the above link in both Chrome and Firefox)

Steps:

1. Click on append items button at the bottom, 10 new items will be added
2. Click again on append items, another 10 items will be added.
3. On Chrome, no issues are observed. On Firefox, after the second click, the window scrolls to the top.
4. Every time new items are added to the masonry component, the window will scroll to the top.

Current behavior 😯

Window scrolls to the top when new items are appended to the masonry component in Firefox.

Expected behavior 🤔

Scroll position doesn't change.

Context 🔦

A work around will be to disable auto scroll anchoring behavior of the browser by adding the following CSS to the masonry component:

sx={{
  overflowAnchor: "none",
}}

Maybe this should be added to the component itself?

Your environment 🌎

@mui/envinfo@2.0.8

Firefox 110.0 (64-bit)

[ImOnMars]

We're also running into this bug. I've found that it also occurs in Chrome, it's just harder to reproduce, but it happens somewhat consistently.

Also in Chrome, overflowAnchor: 'none' seems to prevent the issue, but it also seems to cause the scroll position to anchor to the bottom, causing the browser to stay there when new items are added instead of staying where the previous items were, not sure if this intentional given the implementation of the Masonry component.

[Baribj]

@ImOnMars using overflowAnchor: 'none is hacky to say the least, and definitely not best practice. However, I can't seem to find a better work around.

You are right, when overflowAnchor: 'none is used with chrome, it will stick to the bottom of the screen. I had a div right below the the Masonry component to display a loading spinner. I just kept that div visible at all times with a height of 30px, this fixed the sticking to bottom issue on chrome.

So, this it how it goes:

<Box
  sx={{
    overflowAnchor: "none", // this prevents page from scrolling to top when new products are added on Firefox
  }}
>
  <Masonry
    spacing={spacing}
    columns={responsiveColumns}
    sx={{ width: "auto" }} // fixes extra right spacing on Masonry component (seems like another bug in Masonry)
   >
    {paginatedData.map((item) => (
      <Box key={item.id} >
        .
        .  // code goes here
        .
      </Box>
    ))}
  </Masonry>

  <Box
    display="flex"
    justifyContent="center"
    alignItems="center"
    height={30} // keeping this on the screen at all times seems to fix the sticking to bottom issue with Chrome
   >
    {loading && <CircularProgress size={30} />}
    {!hasMore && <Typography>You have reached the end!</Typography>}
  </Box>
</Box>

[mnajdova]

@hbjORbj can you check https://github.com/mui/material-ui/issues/36241#issuecomment-1438115811, seems like there are few opportunities for improvement in the Masonry component.

[hbjORbj]

Yes, I will 👌

[hbjORbj]

I am looking into this now.

[builders-tinai]

Any update on this? We are running into this problem on every browser - many users have complained :(

[jumpering]

I try to use overflow-anchor: none in my css, but doesn't work (tried in chrome). Also same problems (right spacing and auto scroll). I use Ngx-Masonry (for Angular)