Closed Bug 1341560 Opened 7 years ago Closed 7 years ago

flex vertical centered items with absolute positioning ignores center property

Categories

(Core :: Layout, defect)

54 Branch
defect
Not set
normal

Tracking

()

RESOLVED DUPLICATE of bug 1340309

People

(Reporter: shirkaen, Unassigned)

References

Details

(Keywords: css3)

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Safari/537.36

Steps to reproduce:

<div style="
display: flex;
align-items: center;
justify-content: center;
">
<img src="foo.jpg"/>
<div style="
position: absolute;
width: 100%;
"><span>some text on the middle of the image. Works on Chrome but not in Firefox</span</div></div>


Actual results:

Div with text renders at the top of container. But with position relative it renders on the middle, if it had float: left property.


Expected results:

Div with text should render on the middle of an image.
Has Regression Range: --- → no
Keywords: css3
Without an image do not work too:
<div style="
display: flex;
align-items: center;
justify-content: center;
height: 1920px
width: 1080px;
">
<div style="
position: absolute;
width: 100%;
"><span>some text on the middle of the image. Works on Chrome but not in Firefox</span</div></div>
Component: Untriaged → Layout
Product: Firefox → Core
Seems variation of Bug 1330990
Not really, because Bug 1330990 is about pseudo element. And this is about regular div with position absolute inside div with display flex.
(In reply to Alice0775 White from comment #2)
> Seems variation of Bug 1330990

You're right, it's considered a bug in webkit, I have to find cross browser work around for this case.
Status: UNCONFIRMED → RESOLVED
Closed: 7 years ago
Resolution: --- → DUPLICATE
Update: the spec is changing here, so this is a valid bug again. I'll update the duplicate-target to bug 1340309, which is where I implemented the anticipated new spec change.  (The previous dupe-target, bug 1330990, is also marked as a duplicate of that bug.)

Also, I discovered another bug while working with the test code here -- I filed bug 1343370 on that.
See Also: → 1343370
You need to log in before you can comment on or make changes to this bug.