Closed Bug 1173249 Opened 9 years ago Closed 9 years ago

mesamatrix.net - Cropped text using flexbox

Categories

(Web Compatibility :: Desktop, defect)

Product:
Web Compatibility
Component:
Desktop
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

(Not tracked)

Status:
VERIFIED FIXED

People

(Reporter: romain.failliot, Assigned: dholbert)

References

(
URL
)

Details

User Agent: Mozilla/5.0 (Android; Tablet; rv:38.0) Gecko/38.0 Firefox/38.0
Build ID: 20150528015112

Steps to reproduce:

Go to http://mesamatrix.net 
Shrink the window or use a mobile phone


Actual results:

The entire page is cropped on the left


Expected results:

The whole site should be centered and fit inside the window (or at least show a horizontal bar instead of cropping the left ohf the page)
Paging dholbert... :-)
Component: Untriaged → Layout
Flags: needinfo?(dholbert)
Keywords: testcase
Product: Firefox → Core
Setting "min-width: 0" on the <div id="main"> flex item helps, as expected.  The default min-width is "auto", which means the div won't shrink below its intrinsic width by default per spec.

Note that I see the same behavior in Chrome as well, for the same reasons.

Probably worth contacting the site author to fix their styling.
Yup, comment 2 is correct.

The reason the content overflows to the left *and* to the right is "justify-content: center" on the body. That means when the flex container (the <body> element) is not wide enough to hold its flex item, the flex item will stay centered & overflow its container equally on both sides.

And per some section of the CSS 2.1 spec (I forget exactly where), content overflowing off the left of a scrollable region isn't reachable via scrollbars. (it's not considered scrollable overflow)

> Note that I see the same behavior in Chrome as well, for the same reasons.

(Same here. I'm using Chrome 45, from their dev channel; I suspect bz is using some prerelease version as well. I don't think the official Chrome release has this behavior yet, but it will soon.)
Flags: needinfo?(dholbert)
Component: Layout → Desktop
Keywords: testcase
Product: Core → Tech Evangelism
Whiteboard: [suggested website fix in comment 2]
Version: 38 Branch → unspecified
(In reply to Not doing reviews right now from comment #2)
> Probably worth contacting the site author to fix their styling.

I used the "fork me on github" banner in upper-right of site to submit a pull request:
  https://github.com/MightyCreak/mesamatrix/pull/62
Status: UNCONFIRMED → NEW
Ever confirmed: true
Thanks for doing a PR - great :)
Whiteboard: [suggested website fix in comment 2] → [suggested website fix in comment 2] [sitewait]
URL: http://mesamatrix.net/
Summary: Cropped text using flexbox → mesamatrix.net - Cropped text using flexbox
Heh... because I didn't see the problem with Chrome (the stable release 43, not the dev version), I thought the proper rendering was the one I was expecting, and thus, Chrome was right ;)

I'm actually the author of mesamatrix, I tried and merged the PR. This is the kind of thing where I might have never found the solution otherwise!

Thanks a lot!
Great, I'm glad we could help! Thanks for being proactive & filing bugs, in any case.

Closing this bug, as the pull request was merged.   (I don't see the updated styles on the live site yet, but I assume the updated code is in staging or something, and the live site will be updated before too long.)
Assignee: nobody → dholbert
Status: NEW → RESOLVED
Closed: 9 years ago
Resolution: --- → FIXED
You're right!

I've just integrated it though, you can force-refresh to see it.
Yup, looks fixed. Thanks!
Status: RESOLVED → VERIFIED
Whiteboard: [suggested website fix in comment 2] [sitewait]
Product: Tech Evangelism → Web Compatibility
You need to log in before you can comment on or make changes to this bug.