Bug 262729 – CSS Subgrid unwanted white gap.

• Component: CSS
• Status: RESOLVED CONFIGURATION CHANGED

[Nilesh Prajapati]

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

[Radar WebKit Bug Importer]

<rdar://problem/116810416>

[Karl Dubost]

Not only the white space, but also the way the alignment of the layout is broken in each card compared to the others.

[Karl Dubost]

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;
}

[Nilesh Prajapati]

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

[Ahmad Saleem]

It seems that it was fixed in Safari 17.4 and also confirmed by test case - which was updated by reporter.