Bug 256781

Summary: [css-grid] Incorrect sizing of children of grid element placed inside flex element
Product: WebKit Reporter: Wojciech Maj <kontakt>
Component: Layout and RenderingAssignee: Nobody <webkit-unassigned>
Status: RESOLVED CONFIGURATION CHANGED    
Severity: Normal CC: ahmad.saleem792, bfulgham, karlcow, ldebeasi, simon.fraser, webkit-bug-importer, zalan
Priority: P2 Keywords: InRadar
Version: Safari 16   
Hardware: All   
OS: macOS 13   
Attachments:
Description Flags
Repro
none
Code reproduction with textarea none

Wojciech Maj
Reported 2023-05-15 05:20:29 PDT
Created attachment 466353 [details] Repro Children of grid element placed inside flex element have incorrect auto height calculated, causing said children, technically sitting on a grid, to overflow it. # Steps to reproduce * Open attached document in a decently sized window (higher than the gray container) * Observe how backgroundContainer takes vertical space where in reality should be 0px high * Observe how items with kittens "escape" the grid that is supposed to contain them * Play around: resize window in BOTH directions to see the items moving around # Test results Note: All tests conducted on macOS Ventura 13.3.1 (22E261) * Google Chrome 113.0.5672.92 - ✅ * Microsoft Edge 113.0.1774.42 - ✅ * Mozilla Firefox 113.0 - ✅ * Safari 16.4 (18615.1.26.11.23) - ❌ * Safari TP Release 168 (16.4, WebKit 18616.1.10.2) - ❌
Attachments
Repro (2.28 KB, text/html)
2023-05-15 05:20 PDT, Wojciech Maj 		no flags
Details
Code reproduction with textarea (334 bytes, text/html)
2023-07-07 09:52 PDT, Liam DeBeasi 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Wojciech Maj
Comment 1 2023-05-15 05:41:01 PDT
I'm not sure if what I encountered is indeed just one bug, because there are two distinct ways to fix the bug (see repro source), so this leads me to believe that there might be in fact two bugs.
Radar WebKit Bug Importer
Comment 2 2023-05-15 06:40:21 PDT
<rdar://problem/109351052>
Liam DeBeasi
Comment 3 2023-07-07 09:52:01 PDT
Created attachment 466979 [details] Code reproduction with textarea I attached another reproduction of this bug. My reproduction shows a textarea escaping from the parent grid. In Safari, the textarea's height covers the entire screen. However, in Chrome and Firefox the textarea's height is around 30-40px. Adding "grid-auto-rows: 100%" to the element with "display: grid" seems to avoid the issue.
Ahmad Saleem
Comment 4 2025-04-02 08:06:27 PDT
textarea test seems to work fine in Safari 18.4, the height of textarea is just 30 to 40px rather than full window height.
Ahmad Saleem
Comment 5 2025-04-04 12:31:45 PDT
Other test - I updated with placeholder images - https://jsfiddle.net/jf6w20q7/ <- seems to work fine as well.
Ahmad Saleem
Comment 6 2025-04-04 12:32:29 PDT
@Karl - am I missing something here?
Karl Dubost
Comment 7 2025-04-07 01:47:31 PDT
placekitten.com is not serving images anymore. But even by using another service there is no difference in between browsers for the first test. The second test also is working correctly.
Note You need to log in before you can comment on or make changes to this bug.