New issue
Advanced search Search tips
Note: Color blocks (like or ) mean that a user may not be available. Tooltip shows the reason.

Issue 633011 link

Starred by 9 users

Issue metadata

Status: WontFix
Owner: ----
Closed: Aug 2016
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: All
Pri: 2
Type: Bug



Sign in to add a comment

Flex item with position: absolute and left: auto have wrong position

Reported by jacklu...@gmail.com, Jul 31 2016

Issue description

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

Example URL:
https://jsfiddle.net/91tn25zn/

Steps to reproduce the problem:
1. Use left: auto on an absolutely positioned flex-item
2. Item does not appear in correct position

What is the expected behavior?
Flex item using left: auto should appear with the position calculated if position: static.

What went wrong?
This appears to be a new bug in Chrome 52. 

In Chrome 51 red line appears in the correct position. Also in IE and FF red line appears in correct position.

Does it occur on multiple sites: Yes

Is it a problem with a plugin? No 

Did this work before? Yes Chrome 51

Does this work in other browsers? Yes 

Chrome version: 52.0.2743.82  Channel: stable
OS Version: 10.0
Flash Version: Shockwave Flash 22.0 r0

This causes all vertical dividers in Semantic UI framework to break as well
http://semantic-ui.com/elements/divider.html#vertical-divider
 

Comment 1 by kojii@chromium.org, Aug 1 2016

Components: -Blink Blink>Layout>Flexbox
Labels: -OS-Windows OS-All

Comment 2 by e79...@gmail.com, Aug 1 2016

It looks like position works as before when using display: -webkit-box; instead of display: flex
Status: WontFix (was: Unconfirmed)
The new behavior is correct: https://drafts.csswg.org/css-flexbox/#abspos-items

Note that Edge behaves the same way.
Also see the announcement in http://blog.chromium.org/2016/06/chrome-52-beta-css-containment-simpler.html

"flexbox children with position:absolute will now be positioned using justify and align if the element does not have a left:, right:, top:, or bottom: position specified."
Wow W3C breaks another perfectly functional spec with newly introduce aberrant behavior.
How are we now suppose to layout absolutely positioned elements without having any reference to its normal positioning? Isn't it clear that this is an essential tool for doing layout?

Take the example of vertical dividers above. How could this be accomplished any other way? 

Is this really going to be written out of the browser just by prescriptive adherence to W3C spec?

Cc: fanta...@inkedblade.net gw...@microsoft.com dholb...@gmail.com tabatkins@chromium.org
If you have feedback on the spec, please send it to www-style@w3.org -- this should be a spec-level decision, not a per-browser decision.

Why do you want the element to be absolutely positioned if you want to keep it at its normal position? For the case of the synaptic rulers, you should be able to give it "width: 0px; flex: none; overflow: visible;" though I haven't tested that.
Specs do not affect developers until they reach implementation. Unfortunately by that time the feedback loop is closed and the official line is "you should have helped us when we were writing the spec". 

Is it not clear the disconnect here? Most decisions on appropriateness of changes should come out of usage? How can one know what hurt/helps developers without actually having implemented the standard and received feedback? Why wouldnt that feedback go back to inform the standard? 

Hasn't linguistic theory taught us anything about the nature of the prescriptivist / descriptivist dilemma?

With regards to this example. After the changes in Chrome 52 elements must know whether they are inside a flex or block container to determine how it should apply positioning. (Auto now functions differently in flex). There is no way for a component to determine the layout type of its parent container, so now the possibility of UI component level abstraction is an impossibility.
Why do you say the feedback loop is closed? You can absolutely email www-style and potentially get the spec changed.

Comment 10 by gwhi...@gmail.com, Aug 4 2016

#8: Actually, we have switched over to GitHub for specification issue tracking. If you could please file this issue if you would like to there. Also, it's worth taking a look at this post where I try to address why this was done: https://github.com/philipwalton/flexbugs/issues/101#issuecomment-159465695

If you still feel strongly, and have a proposal for us to consider, please file an issue on GitHub here: https://github.com/w3c/csswg-drafts
 Issue 636325  has been merged into this issue.
I've gone ahead and left issues on CSSWG tracker and in the flexbug thread. Hopefully there will see some traction there. Last time i brought up an issue with a TAG I believe it received 10-15 seconds of conversation in the meeting notes. Perhaps I'll have more luck this time...
Cc: nyerramilli@chromium.org cbiesin...@chromium.org
 Issue 637275  has been merged into this issue.
For everyone's record the CSSWG issue is here
https://github.com/w3c/csswg-drafts/issues/401
Cc: rbasuvula@chromium.org
 Issue 660268  has been merged into this issue.

Sign in to add a comment