RESOLVED FIXED313648
Text in nested CSS Subgrid with overflow:hidden clips content on subsequent items 
https://bugs.webkit.org/show_bug.cgi?id=313648
Summary Text in nested CSS Subgrid with overflow:hidden clips content on subsequent i...
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.