225093 2021-04-27 00:37:47 -0700 Children in absolutely-positioned grid container not aligned vertically 2021-05-07 15:46:37 -0700 1 1 1 Unclassified WebKit Layout and Rendering Safari 14 Unspecified Unspecified RESOLVED WORKSFORME InRadar P2 Normal --- 1 tomc webkit-unassigned bfulgham simon.fraser smoley svillar webkit-bug-importer zalan oldest_to_newest 1754522 0 tomc 2021-04-27 00:37:47 -0700 Consider the following code: --- <style> .container { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: grid; place-items: center; } .element { width: 20px; height: 20px; background: teal; } </style> <div class="container"> <div class="element" /> </div> --- The teal 20x20 block should be centered in the viewport. Why? Because it is an a grid container that covers the whole viewport (via position:absolute and top,right,bottom,left:0), and that container has display:grid and place-items:center. This works as expected in Chrome and Firefox. However Safari 14 the block is at the top edge of the viewport.t When I explicitly set a height in .container (eg. height:100vh), then the vertical alignment works. It appears as if Webkit doesn't calculate the correct height for the grid when it is not explicitly given. The code is deployed to https://ct704.csb.app, if you want to edit it, you can do so via https://codesandbox.io/s/webkit-abs-grid-container-children-bug-ct704 1756461 1 webkit-bug-importer 2021-05-04 00:38:13 -0700 <rdar://problem/77491570> 1758057 2 smoley 2021-05-07 15:46:37 -0700 Thanks for filing, this does not reproduce for me on TOT Safari. Are you able to reproduce this on the latest Safari Technology Preview?