WebKit Bugzilla
New
Browse
Log In
×
Sign in with GitHub
or
Remember my login
Create Account
·
Forgot Password
Forgotten password account recovery
RESOLVED FIXED
70793
Need to handle absolutely positioned elements inside flexboxes
https://bugs.webkit.org/show_bug.cgi?id=70793
Summary
Need to handle absolutely positioned elements inside flexboxes
Ojan Vafai
Reported
2011-10-24 19:23:35 PDT
We also need to review this part of the spec to make sure it makes sense:
http://dev.w3.org/csswg/css3-flexbox/#abspos-flexbox-items
.
Attachments
Patch
(22.90 KB, patch)
2011-12-29 12:10 PST
,
Tony Chang
no flags
Details
Formatted Diff
Diff
Patch
(22.97 KB, patch)
2011-12-29 15:07 PST
,
Tony Chang
no flags
Details
Formatted Diff
Diff
Patch
(28.82 KB, patch)
2012-01-09 16:15 PST
,
Tony Chang
no flags
Details
Formatted Diff
Diff
Show Obsolete
(2)
View All
Add attachment
proposed patch, testcase, etc.
Tony Chang
Comment 1
2011-12-29 12:10:47 PST
Created
attachment 120763
[details]
Patch
Tony Chang
Comment 2
2011-12-29 12:50:35 PST
I didn't add test cases for row-reverse/column-reverse to this patch because I wasn't sure what it was supposed to do. It'll still be out of flow, but it's not clear to me where they should be positioned. For example: <div style="display: -webkit-flexbox; -webkit-flex-flow: row-reverse; position: relative"> <div style="position: absolute;">absolute</div> <div style="width: 1000px">main text</div> </div> +---------------------------------------+ |(1)main text (2)+(3) +---------------------------------------+ It's not clear to me if absolute should be at 1, 2 (right aligned) or 3. I guess (2) makes the most sense, but it will require some extra logic to handle properly (i.e., should be a separate patch).
Tab Atkins
Comment 3
2011-12-29 13:28:26 PST
The static position is the upper-right corner of the "main text" div (flush with the inner cross-start edge of the flexbox, and flush with the main-start edge of the following neighbor). Abspos elements put their top-left corner at their static position, so (3) is correct.
Tony Chang
Comment 4
2011-12-29 15:07:22 PST
Created
attachment 120769
[details]
Patch
WebKit Review Bot
Comment 5
2011-12-29 15:56:02 PST
Comment on
attachment 120769
[details]
Patch
Attachment 120769
[details]
did not pass chromium-ews (chromium-xvfb): Output:
http://queues.webkit.org/results/10924136
New failing tests: http/tests/inspector/resource-tree/resource-tree-document-url.html
Tony Chang
Comment 6
2012-01-05 16:04:00 PST
Comment on
attachment 120769
[details]
Patch The spec page hasn't been updated to the consensus from TPAC. The conclusion was to have position:absolute flex items insert a placeholder. All this means is that for flex-pack: justify, the spacing is a bit weird. I'll update the patch to do this instead.
Tab Atkins
Comment 7
2012-01-06 08:36:03 PST
I'm about to go look through the minutes, but I don't recall that actually being the decision. You may want to hold off on making the change immediately while I verify.
Ojan Vafai
Comment 8
2012-01-06 11:36:22 PST
(In reply to
comment #7
)
> I'm about to go look through the minutes, but I don't recall that actually being the decision. You may want to hold off on making the change immediately while I verify.
That definitely was the conclusion. I think it's silly though. dbaron argued that leaving behind a placeholder makes it consistent with absolute positioning in the rest of the platform (e.g. an absolutely positioned div inside an inline).
Tab Atkins Jr.
Comment 9
2012-01-06 13:35:44 PST
(In reply to
comment #8
)
> (In reply to
comment #7
) > > I'm about to go look through the minutes, but I don't recall that actually being the decision. You may want to hold off on making the change immediately while I verify. > > That definitely was the conclusion. I think it's silly though. dbaron argued that leaving behind a placeholder makes it consistent with absolute positioning in the rest of the platform (e.g. an absolutely positioned div inside an inline).
Ah, indeed. Looks like I remembered wrong. Welp, time to go change the spec.
Ojan Vafai
Comment 10
2012-01-07 12:59:17 PST
The text has been updated
http://dev.w3.org/csswg/css3-flexbox/#abspos-flexbox-items
. We should make sure to add a test for "they'll...join neighboring inline elements in their anonymous flexbox item wrapper boxes."
Tab Atkins Jr.
Comment 11
2012-01-07 13:48:44 PST
(In reply to
comment #10
)
> The text has been updated
http://dev.w3.org/csswg/css3-flexbox/#abspos-flexbox-items
. > > We should make sure to add a test for "they'll...join neighboring inline elements in their anonymous flexbox item wrapper boxes."
You probably want three tests, for the following situations: <flexbox> <div /> <abspos /> text </flexbox> <flexbox> text <abspos /> <div /> </flexbox> <flexbox> <div /> text <abspos /> text <div /> </flexbox> Using 'flex-pack:justify' for all three of them to make it easier to tell what's happening.
Tony Chang
Comment 12
2012-01-09 16:15:35 PST
Created
attachment 121750
[details]
Patch
Dave Hyatt
Comment 13
2012-01-10 13:28:15 PST
Comment on
attachment 121750
[details]
Patch r=me
WebKit Review Bot
Comment 14
2012-01-10 15:53:13 PST
Comment on
attachment 121750
[details]
Patch Clearing flags on attachment: 121750 Committed
r104645
: <
http://trac.webkit.org/changeset/104645
>
WebKit Review Bot
Comment 15
2012-01-10 15:53:19 PST
All reviewed patches have been landed. Closing bug.
Note
You need to
log in
before you can comment on or make changes to this bug.
Top of Page
Format For Printing
XML
Clone This Bug