Bug 156798
| Summary: | Abspos flex item static position | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | Greg Whitworth <gwhit> |
| Component: | Layout and Rendering | Assignee: | Nobody <webkit-unassigned> |
| Status: | RESOLVED WORKSFORME | ||
| Severity: | Normal | CC: | bfulgham, dholbert, dino, gwhit, jond, simon.fraser, svillar, webkit-bug-importer |
| Priority: | P2 | Keywords: | InRadar |
| Version: | WebKit Nightly Build | ||
| Hardware: | All | ||
| OS: | iOS 9.3 | ||
Greg Whitworth
The specification[1] was updated over a year ago to change the static position of an abspos item. To test this:
1. Open http://jsbin.com/xowulasica/edit?html,css,output
2. You should only see a blue square
Expected
---------------
You should only see a blue square
Actual
---------------
You see a blue and green square
[1] https://drafts.csswg.org/css-flexbox/#abspos-items
| Attachments | ||
|---|---|---|
| Add attachment proposed patch, testcase, etc. |
Radar WebKit Bug Importer
<rdar://problem/26724633>
Daniel Holbert
Note: the testcase/expectations in comment 0 do not quite match the latest spec text here. Currently, the CSS Align spec basically says that the flex container's "align-items" value should be ignored for abspos children. (And Greg's original testcase here depends on it being honored for abspos children.) See notes on https://bugs.chromium.org/p/chromium/issues/detail?id=661662 for more details.
Here's a modified version of the original testcase, which uses "align-self: center" on all children, rather than "align-items: center" on the parent. This should still be a valid testcase for this bug.
http://jsbin.com/yudabaxiyo/1/edit?html,css,output
Expected
---------------
You should only see a blue square
Daniel Holbert
(In reply to comment #2)
> This should still be a valid testcase for this bug.
> http://jsbin.com/yudabaxiyo/1/edit?html,css,output
FWIW, this testcase gives "expected" results in these recent versions of all other major web engines:
* Chrome 54 (latest release)
* Edge 14 (latest release)
* Firefox Nightly 52 (2016-11-02), where this was only fixed in the past few days.
Sergio Villar Senin
Daniel I think this is working fine now. Could you verify?
Daniel Holbert
Yes, I think this has been fixed.
Safari 13.1 shows only a centered blue square (same as Firefox/Chrome)
Safari 10.1 shows a centered teal square and a top-right-aligned blue square (which I think/assume was the buggy rendering).
Daniel Holbert
(using the testcase that I'd posted, which is http://jsbin.com/yudabaxiyo/1/edit?html,css,output )
Sergio Villar Senin
Closing this then. Thanks for reporting and verifying!