Bug 262729

Summary:

CSS Subgrid unwanted white gap.

Product:

WebKit

Reporter:

Nilesh Prajapati <nileshprajapati>

Component:

CSS

Assignee:

Nobody <webkit-unassigned>

Status:

RESOLVED CONFIGURATION CHANGED

Severity:

Normal

CC:

ahmad.saleem792, brandonstewart, karlcow, mattwoodrow, sgill26, webkit-bug-importer

Priority:

Keywords:

BrowserCompat, InRadar

Version:

Safari 17

Hardware:

Unspecified

OS:

Unspecified

Attachments:

Description	Flags
Subgrid - issue for Safari 17	none

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

Comment 5 Ahmad Saleem 2024-07-25 16:24:11 PDT

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