Bug 262729 - CSS Subgrid unwanted white gap.
Summary: CSS Subgrid unwanted white gap.
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: Safari 17
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
URL:
Keywords: BrowserCompat, InRadar
Depends on:
Blocks:
 
Reported: 2023-10-05 13:37 PDT by Nilesh Prajapati
Modified: 2024-01-10 07:06 PST (History)
5 users (show)

See Also:

Attachments
Subgrid - issue for Safari 17 (1.81 MB, image/png)
2023-10-05 13:37 PDT, Nilesh Prajapati 		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 Nilesh Prajapati 2023-10-05 13:37:02 PDT 
Created attachment 468077 [details]
Subgrid - issue for Safari 17

Safari 17:CSS Subgrid issue.

When implementing the following card layout using css sub grid the result is inconsistent with other browser's implementation.

Issue 1: a white gap appears between the image and the title.
Issue 2: The height of the footer is taller.


Browsers test
Safari: ❌ 
Chrome: ✅ 
Chrome C: ✅ 
Firefox: ✅ 

Code Example:
https://codepen.io/nileshprajapati/pen/PoXxbdv
Comment 1 Radar WebKit Bug Importer 2023-10-11 08:03:03 PDT 
<rdar://problem/116810416>
Comment 2 Karl Dubost 2023-10-15 19:41:41 PDT 
Not only the white space, but also the way the alignment of the layout is broken in each card compared to the others.
Comment 3 Karl Dubost 2023-10-15 19:51:04 PDT 
As a quick fix, removing the overflow: hidden, fixes it. 

.box {
    /* overflow: hidden; */
    grid-row: span 4;
    padding: 0;
    margin: 0 !important;
    display: grid;
    gap: 0;
    grid-template-rows: subgrid;
}
Comment 4 Nilesh Prajapati 2024-01-10 07:06:22 PST 
Hi Karl

Thank you for reviewing my ticket.

I confirm that removing overflow: hidden fixes the issue.

Will there be an improvement to the subgrid that will fix the following issue in the future release of Safari?

Thanks,
Nilesh