226522 2021-06-01 22:28:59 -0700 Layout bug with nested grid inside flex 2024-07-15 20:02:59 -0700 1 1 1 Unclassified WebKit Layout and Rendering Safari Technology Preview Unspecified Unspecified RESOLVED DUPLICATE 271843 BrowserCompat, InRadar P2 Normal --- 1 tomc webkit-unassigned ahmad.saleem792 bfulgham chernodubv estea karlcow maggotfish rego simon.fraser svillar tombigel webkit-bug-importer webkit-layout-noreply zalan oldest_to_newest 1765877 0 tomc 2021-06-01 22:28:59 -0700 https://dor1x.csb.app The image should be aligned to the top left of the viewbox, but is shifted slightly down in Safari 14 / Safari technology preview. Works in Chrome and Firefox.. Curiously, when I highlight the .box element in the devtools, the highlight shows up in the correct location. But the element appears to be actually rendered in a different place. --- <style> img { display: block; width: 100%; flex-grow: 1; } .container { display: flex; flex-direction: column; justify-content: center; } .box { width: 100%; height: 100%; display: grid; place-items: center; text-align: center; max-width: 20rem; } </style> <div class="container"> <div class="box"> <img src="https://media.giphy.com/media/hR6Q01jCXOr31wctJw/giphy.gif" /> </div> </div> 1768055 1 webkit-bug-importer 2021-06-08 22:29:15 -0700 <rdar://problem/79056985> 1771892 2 estea 2021-06-23 04:02:07 -0700 This is not a safari-specific bug, I can reproduce it in GTK port using mini-browser. 1771905 3 rego 2021-06-23 06:06:59 -0700 This looks like a flexbox or grid layout issue, so not platform specific at all. 1917165 4 chernodubv 2022-12-07 01:11:04 -0800 For some reason, the grid container calculates its height based on the page height. So the content is at the center of the page, rather than at the center of the parent container. Here's a more concise example: --- <div class="flex"> <div class="grid">Content</div> </div> <style> .flex { display: flex; flex-direction: column; } .grid { background: yellow; display: grid; grid-auto-flow: column; justify-content: center; align-items: center; height: 100%; } </style> 1980142 5 maggotfish 2023-09-26 07:04:51 -0700 We have another case that could be related (same?). See example: https://jsbin.com/henosigusa/1/edit?html,css,output It's a structure of: flex > grid > flex. with a min-height on the outer flex. ------ <div class="flex min-height"> <div class="grid"> <div class="flex"> <div class="content">Hello1</div> <div class="content">Hello2</div> <div class="content">Hello3</div> <div class="content">Hello4</div> </div> </div> </div> <style> .grid { display: grid; } .flex { display: flex; flex-direction: column; } .flex > * { flex-grow: 1; } .min-height { min-height: 90px; } </style> ------ It appears that the min-height is affecting the content, and if the height of the content can't be contained inside the container, the min-height is applied to the .content items inside the inner flex. Seems to be WebKit only. 2046400 6 ahmad.saleem792 2024-07-15 19:23:51 -0700 https://jsbin.com/henosigusa/1/edit?html,css,output <- works in Safari Technology Preview 198 while fails in Safari 17.6 Beta. Same is the case with - https://dor1x.csb.app/. Marking this as 'RESOLVED CONFIGURATION CHANGED'. 2046406 7 zalan 2024-07-15 20:02:59 -0700 progressed at https://commits.webkit.org/276880@main *** This bug has been marked as a duplicate of bug 271843 ***