Flex item with position: absolute and left: auto have wrong position
Reported by
jacklu...@gmail.com,
Jul 31 2016
|
|||
Issue descriptionUserAgent: 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
,
Aug 1 2016
It looks like position works as before when using display: -webkit-box; instead of display: flex
,
Aug 1 2016
The new behavior is correct: https://drafts.csswg.org/css-flexbox/#abspos-items Note that Edge behaves the same way.
,
Aug 1 2016
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."
,
Aug 1 2016
Wow W3C breaks another perfectly functional spec with newly introduce aberrant behavior.
,
Aug 1 2016
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?
,
Aug 1 2016
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.
,
Aug 1 2016
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.
,
Aug 1 2016
Why do you say the feedback loop is closed? You can absolutely email www-style and potentially get the spec changed.
,
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
,
Aug 10 2016
Issue 636325 has been merged into this issue.
,
Aug 12 2016
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...
,
Aug 23 2016
,
Aug 23 2016
For everyone's record the CSSWG issue is here https://github.com/w3c/csswg-drafts/issues/401
,
Oct 28 2016
|
|||
►
Sign in to add a comment |
|||
Comment 1 by kojii@chromium.org
, Aug 1 2016Labels: -OS-Windows OS-All