Bug 244573 - Container query causing issue when combined with subgrid
Summary: Container query causing issue when combined with subgrid
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: Safari Technology Preview
Hardware: Mac (Intel) macOS 10.15
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2022-08-30 23:11 PDT by mic.gallego
Modified: 2022-09-26 14:09 PDT (History)
3 users (show)

See Also:

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 an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
Description mic.gallego 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!
Comment 1 mic.gallego 2022-08-30 23:12:02 PDT 
Created attachment 462023 [details]
After a container query has been added on .product-card
Comment 2 Radar WebKit Bug Importer 2022-09-06 23:12:17 PDT 
<rdar://problem/99635774>