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

Duplicates

• I have searched the existing issues

Latest version

• 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)

Start with the linked CodeSandbox reproduction and compare appending items in Chrome and Firefox. Investigate the Masonry component's scroll behavior and the reported overflowAnchor: "none" workaround. Done means repeatedly appending items in Firefox no longer changes the window's scroll position while the existing behavior remains intact.