Bug 255023

Summary:	[css-grid] Masonry layout is not recalculated when grid contents change
Product:	WebKit	Reporter:	William Killerud <klerud>
Component:	CSS	Assignee:	Sammy Gill <sgill26>
Status:	RESOLVED FIXED
Severity:	Normal	CC:	brandonstewart, sgill26, webkit-bug-importer
Priority:	P2	Keywords:	InRadar
Version:	Safari Technology Preview
Hardware:	Mac (Apple Silicon)
OS:	macOS 13
URL:	https://codesandbox.io/s/sharp-kate-44eepy
See Also:	https://github.com/web-platform-tests/wpt/pull/39858

Description William Killerud 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.

Comment 1 Radar WebKit Bug Importer 2023-04-05 10:29:57 PDT

<rdar://problem/107666148>

Comment 2 Sammy Gill 2023-05-04 14:32:09 PDT

Pull request: https://github.com/WebKit/WebKit/pull/13458

Comment 3 Sammy Gill 2023-05-04 16:42:35 PDT

Submitted web-platform-tests pull request: https://github.com/web-platform-tests/wpt/pull/39858

Comment 4 Sammy Gill 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

Comment 5 EWS 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.