Bug 278645 – REGRESSION (276633@main): "grid-row: auto" collapses for child with hidden overflow

• Status: RESOLVED
• Resolution: FIXED
• Component: Layout and Rendering

[Alex]

REGRESSION

Steps to reproduce:
1. Go to https://codepen.io/gmltA/full/NWZMBPy

Expected result:
A `footer` element with green background and text 'data' is visible at the bottom of the screen.

Actual result:
A `footer` is not visible at all.

Works as epxected on:
MacBook (Apple Silicon): Chrome, Firefox, Safari 17.4
Android: Chrome

Fails on:
Desktop: Safari 18, Safari TP (v201).
Mobile: Safari 17.5


P.S. The CSS is a bit wierd because I was trying to imitate the exact properties order from my production environment.

[Radar WebKit Bug Importer]

<rdar://problem/135134725>

[Karl Dubost]

Created attachment 472440 [details]
simplified testcase

I tried to reduce a bit more the testcase.

[Karl Dubost]

Created attachment 472441 [details]
rendering in safari, firefox, chrome

Tested on 
Safari Technology Preview  202           20620.1.2
Firefox Nightly            131.0a1       13124.8.23
Google Chrome Canary       130.0.6680.0  6680.0

[Karl Dubost]

Alex, 

Thanks a lot for the bug.
Do you have this issue on a real website you are developing?

[Alex]

Karl,

unfortunately yes. As I discovered the bug I couldn't believe I didn't test it properly.
Only after some research I understood that this is a regression.

Do you need a link?
I think the bug will be there not for long as I am about to release a workaround for it.

[Karl Dubost]

yes it usually helps raise the priority, even if you are working around it.

[Alex]

Then here it is: https://configurator.esafe.be/index.html#/configurator?link=H4sIAIYr2GYAA72WQU%2FjMBCF%2F4vPURUXFpXcqu4BtCysFm4ViowzSSwcO7LHS6Mq%2F52xQ1FvXBafEo%2FH78soL8o7stHZJki8bVjFGmhF0Fg3qlMoNCuYs7Zl1f65YFpMNiA1%2FQWJwnQa2Kn4MKKyxrPqyKTVYTDxblB0KQs2iAOr%2BByl3lI9ri94sTRsaKPGaYRz4bukuiNJdEIZZNSkrRSRQn23xqsm0l%2FsAYi6Py7a68vik1%2Bm3ciz6eHSeC8oe2VsreJZ0NpvBxtIvlpTO3HASTs8AqIyHemy%2By2b5%2BKkvv5C%2FeBBwytJg%2Bmc%2BLdo7JkYhcMBDNafdeoxYoCzwvMZp8zD4ZtMnKtMnK%2Fe%2Fv%2FiZPIBz%2BSDTDa4OBuHf%2Bfns8nEucrEuczEWWfiZPIBz%2BQDnskHPJMPeCYf8Ew%2B%2BGYbUDBKGYKWT0uKuaEIs3QPghKFohhFxFYZ5XvafkRHaSs4%2BC0QY8ASeme1day6Lssfc3xaknNTPKRSaAHdqTB80KkgLSUVg6tlCL9aDijwq1MrqfTCP7yZXzD90YJGb4X2EDOO1KGBZisleG%2FjoThsij4GsJaCJBjNZNvWA96A6no8%2FRd%2Bwoh9WshJK9OA2wVcIuG9NUsaNF0QHaQkyeZ3z1iGFlwKAAA%3D

If you press '+' at the bottom bar and then select any of the boxes from the list  — the bottom bar would disappear.

[Sammy Gill]

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

[Sammy Gill]

After looking at the failing test cases I believe this change is not right and I need to take a look at the test case again. I think we are currently computing the minimum contribution of the grid item correctly as the spec defines it as:

"The minimum contribution of an item is the smallest outer size it can have. Specifically, if the item’s computed preferred size behaves as auto or depends on the size of its containing block in the relevant axis, its minimum contribution is the outer size that would result from assuming the item’s used minimum size as its preferred size"

- The grid item's width behaves as auto
- The grid item's min-width property is auto so we fallback to grid's automatic minimum sizes for grid items.
- The grid item has overflow: hidden making it a scroll container and as a result causes the automatic minimum size compute to 0.

[EWS]

Committed 286122@main (a3f64e9fd109): <https://commits.webkit.org/286122@main>

Reviewed commits have been landed. Closing PR #33272 and removing active labels.

[Sammy Gill]

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

[EWS]

Committed 283286.458@safari-7620-branch (1d0ee529a7ea): <https://commits.webkit.org/283286.458@safari-7620-branch>

Reviewed commits have been landed. Closing PR #2245 and removing active labels.