New issue
Advanced search Search tips

Issue 842256 link

Starred by 2 users

Issue metadata

Status: Assigned
Owner:
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Linux , Mac
Pri: 2
Type: Bug



Sign in to add a comment

Child not centered when using flexbox with absolute position and margin

Reported by robertko...@gmail.com, May 11 2018

Issue description

UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.170 Safari/537.36

Steps to reproduce the problem:
The following Codepen demonstrates the issue: https://codepen.io/robkom/pen/gzzoKz?editors=1100.

When viewed in Chrome, you can see that the title is not exactly centered. However, when viewed in Firefox, the title is centered, as expected.

This appear to be caused by the margin applied to the title; if you remove the margin, the title appears centered, as expected, in both browsers.

What is the expected behavior?

What went wrong?
Margin on absolutely positioned element (with justify-content: center) is offset from center.

Did this work before? N/A 

Does this work in other browsers? Yes

Chrome version: 66.0.3359.170  Channel: stable
OS Version: macOS High Sierra 10.13.4
Flash Version:
 
bug_chrome_offset.png
23.8 KB View Download
bug_chrome_centered_in_ff.png
25.8 KB View Download
Components: Blink>Layout>Flexbox
Labels: Needs-Triage-M66

Comment 3 by e...@chromium.org, May 14 2018

Owner: cbiesin...@chromium.org
Over to cbiesinger for triage.
Cc: susan.boorgula@chromium.org
Labels: M-68 Triaged-ET FoundIn-68 Target-68 OS-Linux
Status: Untriaged (was: Unconfirmed)
robertkomaromi@ Thanks for the issue.

Able to reproduce the issue on Mac OS High Sierra 10.13.3 and Ubuntu 14.04 on the latest Canary 68.0.3430.0 and Stable 66.0.3359.170 by the steps mentioned in the original comment.
Issue is not observed on Windows 10.

On navigating to the given codepen, can observe the title is not centered on Chrome.

This is a Non-Regression issue as this behavior is observed from M60 Chrome builds. 
Hence marking this as Untriaged for further updates from Dev.

Thanks..

Comment 5 by e...@chromium.org, May 18 2018

Status: Assigned (was: Untriaged)

Sign in to add a comment