Closed
Bug 1138482
Opened 10 years ago
Closed 10 years ago
wired.com images overflow their "cards", when window size is < 650px
Categories
(Web Compatibility :: Mobile, defect)
Web Compatibility
Mobile
Tracking
(Not tracked)
VERIFIED
FIXED
People
(Reporter: stu, Unassigned)
References
Details
(Whiteboard: [suggested fix for site in comment 4])
Attachments
(2 files)
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.10; rv:38.0) Gecko/20100101 Firefox/38.0
Build ID: 20150302004030
Steps to reproduce:
Went to - http://www.wired.com/2015/03/our-new-site/ - with a FF Dev Edtion (38) with a viewport size of < 650
The images have a max-width: 100% and some containers use flexbox and have display: flex; on them, those break. Issue with display: flex;
Actual results:
The img breaks out of the container near the bottom of the page
Expected results:
The image should stay within the container
Comment 1•10 years ago
|
||
I can reproduce this -- with a viewport width of 600px, there's a "More Design" section that shows up at the bottom, and the images (e.g. a concentric-circles-zebrastripe image) stick off the right edge of their bordered area, & off the right edge of the viewport if your viewport is small enough.
This is yet another instance of bug 1043520. More details to follow. tl;dr: the img's parent (.card) needs a "min-width: 0" declaration, to allow it to shrink to be skinnier than its min-content width (the img's intrinsic size).
Blocks: minsizeauto-fallout
Component: Untriaged → Desktop
Product: Firefox → Tech Evangelism
Version: 38 Branch → Trunk
Updated•10 years ago
|
Status: UNCONFIRMED → NEW
Ever confirmed: true
OS: Mac OS X → All
Hardware: x86 → All
Comment 2•10 years ago
|
||
I can reproduce this on the wired.com front page, too ( http://www.wired.com/ ), in Firefox release version.
Reclassifying as "mobile" since this only affects mobile-ish browser sizes (< 650 px).
Component: Desktop → Mobile
Summary: img with max-width breaks out of container with display: flex → wired.com images overflow their "cards", when window size is < 650px
Comment hidden (obsolete) |
Comment 4•10 years ago
|
||
[Sorry -- I misspoke at the beginning of comment 3 -- there's no nesting of flex containers going on. I'm reposting my explanation w/ that fixed to clarify:]
So what happens here is, we have a flex container, with the img as a grandchild, like so:
<div class="flex-row">
<div class="card col big-col-18 med-col-18 sm-col-18 mob-pad">
<img>
The "flex-row" element is a flex container. The "card" element is a flex item. As discussed in meta-bug 1043520, flex items have a new "min-width:auto" behavior, which makes them refuse to shrink smaller than their intrinsic size -- which in this case is the width of the image.
So, "card" refuses to shrink to be smaller than the image's width, which happens to be 600px.
(The image does have "max-width:100%", but that doesn't help; all it does is prevent the image from being wider than its parent, which is 600px (sized to its child) as discussed above.)
The fix here is to give the img's parent-div "min-width:0" in some style rule, so that it can shrink to be less than the intrinsic width of its img-child. That will then give the img's "max-width:100%" something useful (and not-too-large) to actually resolve against. I'm not sure how the site's CSS is structured, but this could go into any rule that's targeting the img's parent-<div>. It probably belongs either in the ".article-group .card" rule (which is where the site sets "width:auto"), or in the ".flex-row .col" rule (which is where the site sets "flex:auto").
This may *appear* to be a Firefox-specific issue, but that's only because Chrome/Safari haven't implemented the spec change that introduced "min-width:auto" as the new default yet (so these elements just have "min-width:0" by default there -- which means my suggested "min-width:0" hackaround won't affect behavior there, which is good). The chrome bug for that is https://code.google.com/p/chromium/issues/detail?id=426898 .
Whiteboard: [suggested fix for site in comment 3] → [suggested fix for site in comment 4]
Comment 5•10 years ago
|
||
I reached out to them on Twitter: https://twitter.com/CodingExon/status/572520365143932928
Comment 6•10 years ago
|
||
Comment 7•10 years ago
|
||
Comment hidden (off-topic) |
Comment hidden (off-topic) |
Comment hidden (off-topic) |
Comment 11•10 years ago
|
||
I just noticed http://www.wired.com/2015/03/wired-dot-com-from-the-devs/ and see that Ross Patten is listed as working on FlexBox. I'm going to email his address from his GitHub account.
Comment 12•10 years ago
|
||
Ross says the he's reproduced the bug & "the fix will go up in our next build". Woot!
Comment 13•10 years ago
|
||
Verified fixed!
Cards no longer overflow, and devtools show that the ".col" rule now has "min-width:0".
Status: NEW → RESOLVED
Closed: 10 years ago
Resolution: --- → FIXED
Comment 14•10 years ago
|
||
Awesome turnaround, thanks to wired.com and Daniel. :)
Comment 15•10 years ago
|
||
(Thanks to stuart for filing, too!)
Comment 16•10 years ago
|
||
Status: RESOLVED → VERIFIED
Updated•10 years ago
|
Assignee | ||
Updated•6 years ago
|
Product: Tech Evangelism → Web Compatibility
You need to log in
before you can comment on or make changes to this bug.
Description
•