[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