Bug 313648

Summary:

Text in nested CSS Subgrid with overflow:hidden clips content on subsequent items

Product:

WebKit

Reporter:

Jo Emil Holen <jo-emil>

Component:

Layout and Rendering

Assignee:

Ahmad Saleem <ahmad.saleem792>

Status:

RESOLVED FIXED

Severity:

Normal

CC:

ahmad.saleem792, bfulgham, jo-emil, karlcow, simon.fraser, webkit-bug-importer, zalan

Priority:

Keywords:

BrowserCompat, InRadar

Version:

WebKit Nightly Build

Hardware:

All

OS:

All

URL:

https://jsfiddle.net/1x6f54hr/

See Also:

https://github.com/web-platform-tests/wpt/pull/60069

Attachments:

Description	Flags
rendering in safari, firefox, chrome	none
testcase	none
Rendering 4 blocks in Safari 26.5	none

Jo Emil Holen

Reported 2026-04-29 06:15:25 PDT

When a grid uses subgrid for row tracks with nested subgrid children, and a descendant has overflow:hidden, the content is vertically clipped on all items except the first. Expected: All items render identically with content fully visible. Actual: The first item renders correctly. All subsequent items have their content clipped. Chrome 147.0.7727.138 and Firefox 150.0.1 render correctly. Tested in newest version of WebKit. Code to reproduce: <!doctype html> <html> <head> <style> .grid { display: grid; gap: 16px; } .card { border: 1px solid black; display: grid; grid-template-rows: subgrid; grid-row: span 3; row-gap: 0; } .content { display: grid; grid-template-rows: subgrid; grid-row: span 2; padding: 16px; } .footer { overflow: hidden; } </style> </head> <body> <div class="grid"> <div class="card"> <h2>Top</h2> <div class="content"> <div class="footer"> Long text that overflows and should be truncated with an ellipsis instead of being clipped vertically </div> </div> </div> <div class="card"> <h2>Top</h2> <div class="content"> <div class="footer"> Long text that overflows and should be truncated with an ellipsis instead of being clipped vertically </div> </div> </div> </div> </body> </html> Notes: - Chrome and Firefox render all items correctly - Only the first item renders correctly in Safari; subsequent items are clipped - The issue is on both macOS and iOS - Removing overflow: hidden from .footer fixes the issue - Removing the <h2> sibling (so the nested subgrid is the only child) also fixes it - Removing the nested subgrid (grid-template-rows: subgrid on .content) fixes it

Attachments
rendering in safari, firefox, chrome (137.30 KB, image/png) 2026-05-13 19:07 PDT, Karl Dubost	no flags	Details
testcase (1.07 KB, text/html) 2026-05-13 19:07 PDT, Karl Dubost	no flags	Details
Rendering 4 blocks in Safari 26.5 (107.76 KB, image/png) 2026-05-14 07:46 PDT, Jo Emil Holen	no flags	Details
View All Add attachment proposed patch, testcase, etc.

Radar WebKit Bug Importer

Comment 1 2026-04-29 12:57:18 PDT

<rdar://problem/175877530>

Karl Dubost

Comment 2 2026-05-13 19:07:26 PDT

Created attachment 479659 [details] rendering in safari, firefox, chrome

Karl Dubost

Comment 3 2026-05-13 19:07:47 PDT

Created attachment 479660 [details] testcase

Karl Dubost

Comment 4 2026-05-13 19:10:44 PDT

Thanks Jo Emil for the testcase. This is very useful. ok I tested with 3 and 4 blocks. And it's always the last one which is being cut. Does it impact a live website you are working on? Can you share which one?

Ahmad Saleem

Comment 5 2026-05-13 22:08:06 PDT

Pull request: https://github.com/WebKit/WebKit/pull/64901

Jo Emil Holen

Comment 6 2026-05-14 07:46:37 PDT

Created attachment 479665 [details] Rendering 4 blocks in Safari 26.5

Jo Emil Holen

Comment 7 2026-05-14 07:49:38 PDT

(In reply to Karl Dubost from comment #4) > ok I tested with 3 and 4 blocks. > And it's always the last one which is being cut. Thanks for looking into it! Sorry if I'm misunderstanding, but when I've tested with 3 and 4 blocks it cuts the text on all except the first block. See attachment 470665 [details]. > Does it impact a live website you are working on? > Can you share which one? It was live on https://www.finn.no/mobility/search/car?last_search=false&registration_class=1, but I was able to clean up the markup of the search result cards, so the bug is no longer present.

EWS

Comment 8 2026-05-19 11:01:27 PDT

Committed 313503@main (fa6448eb65a4): <https://commits.webkit.org/313503@main> Reviewed commits have been landed. Closing PR #64901 and removing active labels.

Sammy Gill

Comment 9 2026-05-21 09:46:10 PDT

Submitted web-platform-tests pull request: https://github.com/web-platform-tests/wpt/pull/60069

Note You need to log in before you can comment on or make changes to this bug.