Bug 175560 - position: absolute flex children are incorrectly positioned
Summary: position: absolute flex children are incorrectly positioned
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: Safari 10
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
Keywords: InRadar
Depends on:
Reported: 2017-08-14 19:44 PDT by Diogo Franco
Modified: 2021-12-10 08:00 PST (History)
9 users (show)

See Also:


Note You need to log in before you can comment on or make changes to this bug.
Description Diogo Franco 2017-08-14 19:44:01 PDT
`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>

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;
Comment 1 Radar WebKit Bug Importer 2017-08-14 19:50:56 PDT
Comment 2 Aswin 2019-09-28 06:51:14 PDT
The bug is still there even in latest safari Version 13.0.1 (14608.

Demo https://codepen.io/niwsa/pen/MWgdbYR
Comment 3 Sergio Villar Senin 2020-06-23 09:08:53 PDT
I think the patch for bug 213110 might have fixed this.
Comment 4 Vitaly Dyachkov 2021-12-10 03:01:52 PST
This bug is not reproducible anymore in the latest Safari Version 15.1 (17612.
Comment 5 Sergio Villar Senin 2021-12-10 08:00:24 PST
Right, let's close this, bug 213110 has likely fixed it.