Cat images overlap on the demo

[chenxiaoyao6228]

Describe the bug Cat images overlap on the demo

To Reproduce see: https://codesandbox.io/s/masonic-inside-of-a-scrollable-div-example-k9l6c?file=/src/index.js

Expected behavior expect not to overlap

Screenshots

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context Add any other context about the problem here.

[wiktoriavh]

Same issue here

I am on Desktop, Windows 10, Vivaldi (Chromium) Browser.

[samwyzz]

Facing a similar behavior.

Not to mention on the initial render of the masonry grid, all cells that could be fit inside the window are not displayed. Only upon scrolling do the cells get appended. Also these appended cells have a different vertical gap than the cells that are displayed on the initial render.

Based on my limited understanding, I believe this behavior is related to the cell height and itemHeightEstimate attribute.

This is a confusing aspect of masonic, since the purpose of masonry layouts is to have cells of varying heights and not having a single universal height. I don't understand how a generalized height estimate could apply to cells with a major difference in height. For example a grid with some cells with a height of a say 1000px and some with a height of 50px. What would be the heightEstimate in this case ?

Edit:

• The overlapping of cells it seems is caused when the height of cells is determined dynamically and cell component(s) do not have a fixed height defined with CSS styling (height, min height)

• The behavior of some cells being hidden on the first paint also is affected by the height of the cells being calculated properly. Also have noticed a difference in behavior with the width of the container holding the cells having a fixed width defined.

First "page" load yield hidden cells #70 Newly loaded items from infiniteLoader seem to be placed in 1 column #17