Closed Bug 1224421 Opened 9 years ago Closed 9 years ago

On mathleap.org, justify-content: space-between does not flush last flex item to edge, because there's another invisible flex item for abspos placeholder

Categories

(Core :: Layout, defect)

defect
Not set
normal

Tracking

()

VERIFIED DUPLICATE of bug 874718

People

(Reporter: gaye, Unassigned)

Details

Attachments

(2 files)

It's supposed to according to the documentation here https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content and chrome does this correctly.
Needinfo since I'm not sure I've put this in the right comp to get it in front of graphics people
Flags: needinfo?(dholbert)
Flags: needinfo?(bugs)
Gareth, do you have a testcase that demonstrates the problem?

This simple test seems to work fine for me:
data:text/html,<body style="display:flex; justify-content:space-between"><a>x</a><a>y</a>
Component: DOM: Core & HTML → Layout
Flags: needinfo?(dholbert)
Flags: needinfo?(bugs)
Flags: needinfo?(gaye)
Please reopen when you have a testcase. Thanks.
Status: NEW → RESOLVED
Closed: 9 years ago
Resolution: --- → INCOMPLETE
Status: RESOLVED → REOPENED
Flags: needinfo?(gaye)
Resolution: INCOMPLETE → ---
Attached image Gecko screenshot
Screenshot in FF -- note that the right column isn't flushed all the way to the right
Attachment #8690884 - Attachment description: Screenshot from 2015-11-23 11-53-42.png → Gecko screenshot
Attached image Chromium screenshot
Note that in chromium the right column is properly right aligned
Does that give you all enough to go off of?
Flags: needinfo?(mats)
Flags: needinfo?(dholbert)
(In reply to Gareth Aye [:gaye] (back from PTO) from comment #4)
> Screenshot in FF -- note that the right column isn't flushed all the way to
> the right

The backgrounded areas aren't, but the heading "+" is.

(In reply to Gareth Aye [:gaye] (back from PTO) from comment #6)
> Does that give you all enough to go off of?

Nope; there are too many layers of nesting & different things that could be the explanation. (I think it's unlikely this is a "justify-content" bug, really, and it's more likely this is a sizing or clipping bug.)

I really would need to see a live testcase. Can you stand a version of this up publicly somewhere?  Or, maybe I can take a look at this on your machine in Mozlando, if you'll be there?
Flags: needinfo?(mats)
Flags: needinfo?(gaye)
Flags: needinfo?(dholbert)
Or, better (and possibly easier for you) -- if you do File | Save Page As and make sure "Web Page, Complete" is selected in the save dialog), do you end up with a local file that reproduces the bug?

If so, feel free to post or email a zipped version of that file & its resources folder.
Sure!

1. Go to https://mathleap.org and log in with username dholbert@mozilla.com and password dholbert.
2. Click on "Test Class".
Flags: needinfo?(gaye) → needinfo?(dholbert)
Thanks! You can delete the account now.

What's happening is: the "+" image is absolutely positioned, and per old spec text, we're letting its invisible placeholder create a (otherwise-empty) flex item.

*That* flex item (wrapping the invisible placeholder for the "+" image) is getting aligned at the far right, according to "space-between".  (And the extra space you're seeing is the space between the final "real" flex item & the flex item for the invisible placeholder.)

Bug 874718 will fix this. In the meantime, if you want to work around this, you'll want to make sure the "+" isn't an abspos child of a flex container. (You could make it a sibling, or a child of a flex item.)
Depends on: 874718
Flags: needinfo?(dholbert)
Summary: [flex] justify-content: space-between does not flush last item to edge → On mathleap.org, justify-content: space-between does not flush last flex item to edge, because there's another invisible flex item for abspos placeholder
(I'm going to dupe this to bug 874718, actually, since I'm confident that bug is what's broken here & what will fix this.)
No longer depends on: 874718
Status: REOPENED → RESOLVED
Closed: 9 years ago9 years ago
Resolution: --- → DUPLICATE
Thank you for all of the info :dholbert! I'll cc myself on bug 874718.
Status: RESOLVED → REOPENED
Resolution: DUPLICATE → ---
Status: REOPENED → RESOLVED
Closed: 9 years ago9 years ago
Resolution: --- → DUPLICATE
I'm going to mark this as "VERIFIED" duplicate, because based on all the information available, the duping was correct.

(I'm unable to actually test the URL here, since (a) it was behind a login wall, and (b) the site in question seems to have shut down -- "We're shutting down our service to turn 100% of our focus toward new products for education."  Hence, just VERIFYING based on the information we have on this bug.)
Status: RESOLVED → VERIFIED
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: