Children in absolutely-positioned grid container not aligned vertically

• Component: Layout and Rendering
• Status: RESOLVED WORKSFORME

[Tomas Carnecky]

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

[Radar WebKit Bug Importer]

<rdar://problem/77491570>

[Smoley]

Thanks for filing, this does not reproduce for me on TOT Safari. Are you able to reproduce this on the latest Safari Technology Preview?