[Webkit-unassigned] [Bug 179197] New: Flexbox containing center-aligned grid misaligns

[bugzilla-daemon at webkit.org]

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

            Bug ID: 179197
           Summary: Flexbox containing center-aligned grid misaligns
           Product: WebKit
           Version: Safari 11
          Hardware: Macintosh
                OS: macOS 10.13
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: CSS
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: ezekielelin at me.com

Created attachment 325765

  --> https://bugs.webkit.org/attachment.cgi?id=325765&action=review

Example HTML file

Creating a vertical flex box (flex-direction: column) with two children, one a grid and one other element, with the grid set to grow (flex-grow: 1).

With this configuration no inconsistencies appear. The second element takes up the space it needs at the bottom of the page, and the first (grid) element takes up the remaining top portion.

However, telling the grid to align items to center (align-items: center), differences appear. Safari centers further down, appearing to center within the containing element, not within the grid element. Firefox and Chrome do not exhibit this behavior.

An example file is included demonstrating the differences.

I have indicated my operating system and hardware. I have not tested it on other devices.

Safari: https://i.imgur.com/S38vIhS.png
Chrome: https://i.imgur.com/9u4rM2Y.png
Firefox: https://i.imgur.com/tMLoviA.png

-- 
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/20171102/df3e2f8e/attachment-0001.html>