Bug 292516
Summary: | Inserting a subgrid child with `position: absolute` can cause `auto` column widths to be calculated incorrectly. | ||
---|---|---|---|
Product: | WebKit | Reporter: | dwarn |
Component: | Layout and Rendering | Assignee: | Nobody <webkit-unassigned> |
Status: | NEW | ||
Severity: | Normal | CC: | bfulgham, karlcow, sgill26, simon.fraser, webkit-bug-importer, zalan |
Priority: | P2 | Keywords: | InRadar |
Version: | Safari 18 | ||
Hardware: | Mac (Apple Silicon) | ||
OS: | macOS 14 |
dwarn
Overview:
Inserting a subgrid child with `position: absolute` can cause `auto` column widths to be calculated incorrectly.
---
Reproduction:
1. Go to https://codesandbox.io/p/sandbox/sleepy-noyce-vynd7s
2. Hover over the subgrid element to inject an element.
3. Or click the 'toggle inserted element' button.
---
Generic Steps to Reproduce:
1. Create a grid with an `auto` width column and at least one other non-`auto` width column.
2. Create a subgrid that spans the entire parent grid.
3. Have a child that is always visible as part of the subgrid in the `auto` column.
4. Insert an absolutely positioned child in the non-`auto` column, after the initial load.
5. (Optional) remove the second child, the bug remains.
---
Actual Results:
The `auto` width column has an incorrect width. It looks like it is being treated as `1fr` instead.
---
Expected Results:
The `auto` width column should not be affected by the addition of a sibling with `position: absolute`.
The initial column width, before inserting the absolutely positioned second child, is correct and consistent with other browsers.
---
Build Date & Hardware:
Safari 18.3 (19620.2.4.111.8, 19620) on MacOS 14.7.2
---
Additional Builds and Platforms:
Not reproducible on Chrome or Firefox.
Attachments | ||
---|---|---|
Add attachment proposed patch, testcase, etc. |
Karl Dubost
This is interesting because sometimes I get the right layout. After a while the dashed border around subgrid child is exhibiting the right width. it takes a couple of seconds.
Radar WebKit Bug Importer
<rdar://problem/151125072>