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

See Also:


Attachments

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>
    </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
<rdar://problem/33889596>
Comment 2 Aswin 2019-09-28 06:51:14 PDT
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
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.2.9.1.20).
Comment 5 Sergio Villar Senin 2021-12-10 08:00:24 PST
Right, let's close this, bug 213110 has likely fixed it.