Bug 244573

Summary: Container query causing issue when combined with subgrid
Product: WebKit Reporter: mic.gallego
Component: CSSAssignee: Nobody <webkit-unassigned>
Status: NEW    
Severity: Normal CC: koivisto, simon.fraser, webkit-bug-importer
Priority: P2 Keywords: InRadar
Version: Safari Technology Preview   
Hardware: Mac (Intel)   
OS: macOS 10.15   
See Also: https://bugs.webkit.org/show_bug.cgi?id=238329
Attachments:
Description Flags
Attachment 1
none
After a container query has been added on .product-card none

mic.gallego
Reported 2022-08-30 23:11:05 PDT
Created attachment 462022 [details] Attachment 1 Hi, I have tried to create a minimum reproduction test case, but been unsuccessful, so I suppose it may be a combination of different factors. The issue can be reproduced here: https://impact-dev-store.myshopify.com/collections/cables (you will need to enter the password rewblo to access the store first). You can see the grid of product, with the image aligning with the content of the product card (attachment 1). However, as soon as you add a "container-type: inline-size" on the .product-card class, everything starts to fail (even without actually using it inside a container query). The subgrid seems to calculate incorrectly the rows. Thanks!
Attachments
Attachment 1 (1.17 MB, image/png)
2022-08-30 23:11 PDT, mic.gallego 		no flags
Details
After a container query has been added on .product-card (1.78 MB, image/png)
2022-08-30 23:12 PDT, mic.gallego 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
mic.gallego
Comment 1 2022-08-30 23:12:02 PDT
Created attachment 462023 [details] After a container query has been added on .product-card
Radar WebKit Bug Importer
Comment 2 2022-09-06 23:12:17 PDT
<rdar://problem/99635774>
Note You need to log in before you can comment on or make changes to this bug.