RESOLVED FIXED 255023
[css-grid] Masonry layout is not recalculated when grid contents change 
https://bugs.webkit.org/show_bug.cgi?id=255023
Summary [css-grid] Masonry layout is not recalculated when grid contents change
William Killerud
Reported 2023-04-05 01:41:11 PDT
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.
Attachments
Add attachment proposed patch, testcase, etc.
Radar WebKit Bug Importer
Comment 1 2023-04-05 10:29:57 PDT
<rdar://problem/107666148>
Sammy Gill
Comment 2 2023-05-04 14:32:09 PDT
Pull request: https://github.com/WebKit/WebKit/pull/13458
Sammy Gill
Comment 3 2023-05-04 16:42:35 PDT
Submitted web-platform-tests pull request: https://github.com/web-platform-tests/wpt/pull/39858
Sammy Gill
Comment 4 2023-05-04 16:45:12 PDT
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
EWS
Comment 5 2023-05-04 21:49:04 PDT
Committed 263709@main (215644fbb8d3): <https://commits.webkit.org/263709@main> Reviewed commits have been landed. Closing PR #13458 and removing active labels.
Note You need to log in before you can comment on or make changes to this bug.