Bug 256047

Summary: Auto-fit grid columns collapsing with inline-size containment
Product: WebKit Reporter: Darby Dixon III <eurgeht>
Component: CSSAssignee: Nobody <webkit-unassigned>
Status: NEW    
Severity: Normal CC: karlcow, koivisto, miriam, rezi99, sgill26, webkit-bug-importer
Priority: P2 Keywords: BrowserCompat, InRadar
Version: WebKit Nightly Build   
Hardware: Mac (Apple Silicon)   
OS: macOS 13   
Attachments:
Description Flags
rendering in safari, firefox, chrome
none
test case none

Darby Dixon III
Reported 2023-04-27 09:56:09 PDT
Element with container-type: inline-size, display: grid, and auto-fit grid-template-columns collapses grid column widths to 0 Minimal error case: https://codepen.io/darby3/pen/vYVZZEe Summary: I have an element set to display: grid, with auto-fit columns. This works as expected. As soon as I add container-type: inline-size, the grid width (column widths) collapse to 0 width. Switching to auto-fill columns, however, the columns work as expected. While I didn't reproduce here, setting container-type to size appears to also collapse the height of the grid rows to 0. I've noted mac apple silicon / macos above, but I've reports of this error on an iphone as well.
Attachments
rendering in safari, firefox, chrome (629.09 KB, image/png)
2024-04-16 16:24 PDT, Karl Dubost 		no flags
Details
test case (467 bytes, text/html)
2024-04-17 02:00 PDT, Antti Koivisto 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Radar WebKit Bug Importer
Comment 1 2023-05-04 09:57:25 PDT
<rdar://problem/108897961>
Rezi
Comment 2 2023-11-27 13:26:06 PST
Issue is still present. Can be solved by moving container query to grid's wrapper element (which can cause bad semantics). The buggy Safari behavior works fine on Chrome and Firefox. It would be great if resolved soon.
Karl Dubost
Comment 3 2024-04-16 16:24:19 PDT
Created attachment 470948 [details] rendering in safari, firefox, chrome Tested in Safari Technology Preview 192 19619.1.8.1 Firefox Nightly 126.0a1 12624.4.13 Google Chrome Canary 125.0.6422.0 6422.0
Karl Dubost
Comment 4 2024-04-16 16:26:06 PDT
This might need a WPT test case.
Antti Koivisto
Comment 5 2024-04-17 01:57:44 PDT
This is a containment bug, not a container query bug. Replacing container-type: inline-size; in the test case with contain: inline-size; still reproduces the issue.
Antti Koivisto
Comment 6 2024-04-17 02:00:28 PDT
Created attachment 470954 [details] test case
Note You need to log in before you can comment on or make changes to this bug.