Demo: https://codesandbox.io/s/sharp-kate-44eepy My case is a dashboard of cards with masonry layout, where content is loaded async. The heights of each card, and number of cards, can vary between users. In the demo, I simulate data fetching with setTimeout. My expectation is that the browser recalculates the layout when the contents of the grid changes. Currently, the containers seem to not change size, and the content overflows. Firefox 111.0.1 behaves as expected when the feature flag is turned on.
<rdar://problem/107666148>
Pull request: https://github.com/WebKit/WebKit/pull/13458
Submitted web-platform-tests pull request: https://github.com/web-platform-tests/wpt/pull/39858
I think the underlying issue with the description is that we are not properly updating our masonry offsets for each item when we should be. The items end up using old offset values, which is causing some overlapping like in the test case of the PR
Committed 263709@main (215644fbb8d3): <https://commits.webkit.org/263709@main> Reviewed commits have been landed. Closing PR #13458 and removing active labels.