[Webkit-unassigned] [Bug 175560] New: position: absolute flex children are incorrectly positioned

[bugzilla-daemon at webkit.org]

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

            Bug ID: 175560
           Summary: position: absolute flex children are incorrectly
                    positioned
           Product: WebKit
           Version: Safari 10
          Hardware: Unspecified
                OS: Unspecified
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: Layout and Rendering
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: diogomfranco at gmail.com
                CC: bfulgham at webkit.org, simon.fraser at apple.com,
                    zalan at apple.com

`position: absolute` children are always positioned on the parent's top/left corner, instead of being positioned according to the flex algorithm.

https://www.w3.org/TR/css-flexbox-1/#abspos-items says that the item should be positioned "as if it was the sole child" of the flex container,
but it ignores the align-items/justify-content settings of the flex container in WebKit. It is correctly positioned in Blink, for example.

The following jsfiddle has a runnable reproduction https://jsfiddle.net/f63zeeta/

For the record, here is the HTML source:

    <div class='wrapper'>
    <div class='first-child'></div>
    <div class='second-child'></div>
    </div>

Here is the CSS source:

    .wrapper {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .first-child {
      position: absolute;
      width: 20px;
      height: 20px;
      background: black;
    }

    .second-child {
      width: 50px;
      height: 50px;
      background: white;
    }

-- 
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/20170815/26a859e8/attachment.html>