position: absolute flex children are incorrectly positioned

• Component: Layout and Rendering
• Status: RESOLVED WORKSFORME

[Diogo Franco]

`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;
    }

[Radar WebKit Bug Importer]

<rdar://problem/33889596>

[Aswin]

The bug is still there even in latest safari Version 13.0.1 (14608.2.11.1.11).

Demo https://codepen.io/niwsa/pen/MWgdbYR

[Sergio Villar Senin]

I think the patch for bug 213110 might have fixed this.

[Vitaly Dyachkov]

This bug is not reproducible anymore in the latest Safari Version 15.1 (17612.2.9.1.20).

[Sergio Villar Senin]

Right, let's close this, bug 213110 has likely fixed it.