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 | ||
William Killerud
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
<rdar://problem/107666148>
Sammy Gill
Pull request: https://github.com/WebKit/WebKit/pull/13458
Sammy Gill
Submitted web-platform-tests pull request: https://github.com/web-platform-tests/wpt/pull/39858
Sammy Gill
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
Committed 263709@main (215644fbb8d3): <https://commits.webkit.org/263709@main>
Reviewed commits have been landed. Closing PR #13458 and removing active labels.