[Webkit-unassigned] [Bug 225093] New: Children in absolutely-positioned grid container not aligned vertically

bugzilla-daemon at webkit.org bugzilla-daemon at webkit.org
Tue Apr 27 00:37:47 PDT 2021


https://bugs.webkit.org/show_bug.cgi?id=225093

            Bug ID: 225093
           Summary: Children in absolutely-positioned grid container not
                    aligned vertically
           Product: WebKit
           Version: Safari 14
          Hardware: Unspecified
                OS: Unspecified
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: Layout and Rendering
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: tomc at caurea.org
                CC: bfulgham at webkit.org, simon.fraser at apple.com,
                    zalan at apple.com

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

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20210427/9660b8aa/attachment-0001.htm>


More information about the webkit-unassigned mailing list