256781 2023-05-15 05:20:29 -0700 [css-grid] Incorrect sizing of children of grid element placed inside flex element 2025-04-07 01:47:55 -0700 1 1 1 Unclassified WebKit Layout and Rendering Safari 16 All macOS 13 RESOLVED CONFIGURATION CHANGED InRadar P2 Normal --- 1 kontakt webkit-unassigned ahmad.saleem792 bfulgham karlcow ldebeasi simon.fraser webkit-bug-importer zalan oldest_to_newest 1955400 0 466353 kontakt 2023-05-15 05:20:29 -0700 Created attachment 466353 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) - ❌ 1955403 1 kontakt 2023-05-15 05:41:01 -0700 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. 1955407 2 webkit-bug-importer 2023-05-15 06:40:21 -0700 <rdar://problem/109351052> 1965596 3 466979 ldebeasi 2023-07-07 09:52:01 -0700 Created attachment 466979 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. 2108193 4 ahmad.saleem792 2025-04-02 08:06:27 -0700 textarea test seems to work fine in Safari 18.4, the height of textarea is just 30 to 40px rather than full window height. 2108962 5 ahmad.saleem792 2025-04-04 12:31:45 -0700 Other test - I updated with placeholder images - https://jsfiddle.net/jf6w20q7/ <- seems to work fine as well. 2108963 6 ahmad.saleem792 2025-04-04 12:32:29 -0700 @Karl - am I missing something here? 2109359 7 karlcow 2025-04-07 01:47:31 -0700 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. 466353 2023-05-15 05:20:29 -0700 2023-05-15 05:20:29 -0700 Repro safari-bug-grid-in-flex.html text/html 2330 kontakt PCFET0NUWVBFIGh0bWw+CjxodG1sPgoKPGhlYWQ+CiAgPG1ldGEgY2hhcnNldD0idXRmLTgiIC8+ CiAgPHRpdGxlPlNhZmFyaSBHcmlkIGluIEZsZXggYnVnPC90aXRsZT4KICA8c3R5bGU+CiAgICAu Ym9keSB7CiAgICAgIGRpc3BsYXk6IGZsZXg7CiAgICAgIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47 CiAgICB9CgogICAgLnN0YWNrIHsKICAgICAgZGlzcGxheTogZ3JpZDsKICAgICAgZ2FwOiAyMHB4 OwogICAgICBiYWNrZ3JvdW5kOiByZ2IoMTUwIDE1MCAxNTApOwogICAgfQoKICAgIC5iYWNrZ3Jv dW5kQ29udGFpbmVyIHt9CgogICAgLml0ZW1zIHsKICAgICAgZGlzcGxheTogZ3JpZDsKICAgICAg Z2FwOiAyMHB4OwogICAgICAvKiBGSVg6IHJlbW92ZSAiZGlzcGxheTogZ3JpZDsiLCBhZGQgImRp c3BsYXk6IGZsZXg7IGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47IiBpbnN0ZWFkICovCiAgICB9Cgog ICAgLml0ZW0gewogICAgICB3aWR0aDogMzAwcHg7CiAgICAgIGJhY2tncm91bmQ6IHJnYmEoMTAw IDEwMCAxMDApOwogICAgfQoKICAgIC5pbWFnZUNvbnRhaW5lciB7CiAgICAgIHdpZHRoOiAxNTBw eDsKICAgICAgYXNwZWN0LXJhdGlvOiAxIC8gMTsKICAgICAgLyogRklYOiByZW1vdmUgImFzcGVj dC1yYXRpbzogMSAvIDE7IiwgYWRkICJoZWlnaHQ6IDE1MHB4OyIgKi8KICAgIH0KCiAgICAuaW1h Z2UgewogICAgICBkaXNwbGF5OiBibG9jazsKICAgICAgd2lkdGg6IDEwMCU7CiAgICAgIGhlaWdo dDogMTAwJTsKICAgIH0KICA8L3N0eWxlPgogIDxzdHlsZT4KICA8L3N0eWxlPgo8L2hlYWQ+Cgo8 Ym9keT4KICA8aDE+U2FmYXJpIEdyaWQgaW4gRmxleCBidWc8L2gxPgogIDxoMj5TdGVwcyB0byBy ZXByb2R1Y2U8L2gyPgogIDx1bD4KICAgIDxsaT5PcGVuIHRoaXMgZG9jdW1lbnQgaW4gYSBkZWNl bnRseSBzaXplZCB3aW5kb3cgKGhpZ2hlciB0aGFuIHRoZSBncmF5IGNvbnRhaW5lcik8L2xpPgog ICAgPGxpPk9ic2VydmUgaG93IGJhY2tncm91bmRDb250YWluZXIgdGFrZXMgdmVydGljYWwgc3Bh Y2Ugd2hlcmUgaW4gcmVhbGl0eSBzaG91bGQgYmUgMHB4IGhpZ2g8L2xpPgogICAgPGxpPk9ic2Vy dmUgaG93IGl0ZW1zIHdpdGgga2l0dGVucyAiZXNjYXBlIiB0aGUgZ3JpZCB0aGF0IGlzIHN1cHBv c2VkIHRvIGNvbnRhaW4gdGhlbTwvbGk+CiAgICA8bGk+UGxheSBhcm91bmQ6IHJlc2l6ZSB3aW5k b3cgaW4gQk9USCBkaXJlY3Rpb25zIHRvIHNlZSB0aGUgaXRlbXMgbW92aW5nIGFyb3VuZDwvbGk+ CiAgPC91bD4KICA8aDI+VGVzdCByZXN1bHRzPC9oMj4KICA8dWw+CiAgICA8bGk+R29vZ2xlIENo cm9tZSAxMTMuMC41NjcyLjkyIC0g4pyFPC9saT4KICAgIDxsaT5NaWNyb3NvZnQgRWRnZSAxMTMu MC4xNzc0LjQyIC0g4pyFPC9saT4KICAgIDxsaT5Nb3ppbGxhIEZpcmVmb3ggMTEzLjAgLSDinIU8 L2xpPgogICAgPGxpPlNhZmFyaSAxNi40ICgxODYxNS4xLjI2LjExLjIzKSAtIOKdjDwvbGk+CiAg ICA8bGk+U2FmYXJpIFRQIFJlbGVhc2UgMTY4ICgxNi40LCBXZWJLaXQgMTg2MTYuMS4xMC4yKSAt IOKdjDwvbGk+CiAgPC91bD4KICA8ZGl2IGNsYXNzPSJib2R5Ij4KICAgIDxkaXYgY2xhc3M9InN0 YWNrIj4KICAgICAgPGRpdiBjbGFzcz0iYmFja2dyb3VuZENvbnRhaW5lciI+PC9kaXY+CiAgICAg IDxkaXYgY2xhc3M9Iml0ZW1zIj4KICAgICAgICA8ZGl2IGNsYXNzPSJpdGVtIj4KICAgICAgICAg IDxkaXYgY2xhc3M9ImltYWdlQ29udGFpbmVyIj4KICAgICAgICAgICAgPGltZyBhbHQ9IiIgY2xh c3M9ImltYWdlIiBoZWlnaHQ9IjE1MCIgc3JjPSJodHRwczovL3BsYWNla2l0dGVuLmNvbS8xNTAv MTUwIiB3aWR0aD0iMTUwIiAvPgogICAgICAgICAgPC9kaXY+CiAgICAgICAgPC9kaXY+CiAgICAg ICAgPGRpdiBjbGFzcz0iaXRlbSI+CiAgICAgICAgICA8ZGl2IGNsYXNzPSJpbWFnZUNvbnRhaW5l ciI+CiAgICAgICAgICAgIDxpbWcgYWx0PSIiIGNsYXNzPSJpbWFnZSIgaGVpZ2h0PSIxNTAiIHNy Yz0iaHR0cHM6Ly9wbGFjZWtpdHRlbi5jb20vMTUxLzE1MSIgd2lkdGg9IjE1MCIgLz4KICAgICAg ICAgIDwvZGl2PgogICAgICAgIDwvZGl2PgogICAgICAgIDxkaXYgY2xhc3M9Iml0ZW0iPgogICAg ICAgICAgPGRpdiBjbGFzcz0iaW1hZ2VDb250YWluZXIiPgogICAgICAgICAgICA8aW1nIGFsdD0i IiBjbGFzcz0iaW1hZ2UiIGhlaWdodD0iMTUwIiBzcmM9Imh0dHBzOi8vcGxhY2VraXR0ZW4uY29t LzE1Mi8xNTIiIHdpZHRoPSIxNTAiIC8+CiAgICAgICAgICA8L2Rpdj4KICAgICAgICA8L2Rpdj4K ICAgICAgPC9kaXY+CiAgICA8L2Rpdj4KICA8L2Rpdj4KPC9ib2R5PgoKPC9odG1sPgo= 466979 2023-07-07 09:52:01 -0700 2023-07-07 09:52:01 -0700 Code reproduction with textarea index.html text/html 334 ldebeasi PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPG1ldGEgY2hhcnNldD0iVVRGLTgi IC8+CiAgICA8bWV0YSBuYW1lPSJ2aWV3cG9ydCIgY29udGVudD0id2lkdGg9ZGV2aWNlLXdpZHRo LCBpbml0aWFsLXNjYWxlPTEiIC8+CiAgPC9oZWFkPgogIDxib2R5PiAgIAogICAgPGRpdiBzdHls ZT0iZGlzcGxheTpmbGV4OyBmbGV4LWRpcmVjdGlvbjogY29sdW1uOyI+CiAgICAgIDxkaXYgc3R5 bGU9ImRpc3BsYXk6IGdyaWQ7IGhlaWdodDogMTAwJTsiPgogICAgICAgIDx0ZXh0YXJlYT48L3Rl eHRhcmVhPgogICAgICA8L2Rpdj4KICAgIDwvZGl2PgogIDwvYm9keT4KPC9odG1sPg==