Closed Bug 1023118 Opened 11 years ago Closed 10 years ago

max-width:100% on image in shrink-wrap situation (inline-block) breaks layout on Bing Blog

Categories

(Core :: Layout: Block and Inline, defect, P4)

Product:
Core
Component:
Layout: Block and Inline
Platform:
Other
Android
Type:
defect

Tracking

()

Status:
RESOLVED FIXED
Milestone:
mozilla47
Tracking Flags:
Tracking Status
firefox45 --- affected
firefox46 --- fixed
firefox47 --- fixed

People

(Reporter: sawrubh, Unassigned)

References

(
URL
)

Details

Attachments

(1 file)

Screenshot_2014-06-10-13-19-50.png
304.78 KB, image/png
Details
I have visited http://blogs.bing.com/search/2014/02/10/bitcoin-conversion-now-live/ and it's layout is broken in Fennec (the text is cut in half). It works perfectly in Chrome.
Mike/Kats, can you check if this is an mobile evangelism issue for Microsoft?
I'm not sure. There's a <main id="main"> which has a computed width of 364px and inside it is an <article id="post-1103"> (which is the top article on the blog URL in comment 0, as of this writing) with a computed width of 780px. Since the article is wider than the body, it is chopped off. The <article> has a display:inline-block property, and removing that makes the article fit correctly. However I'm not sure what the spec says about display:inline-block so we'd need somebody from layout to comment on whether or not what we're doing is correct. This is reproducible in desktop FF using the responsive design mode, so bumping over to layout for somebody to investigate.
Component: Readability → Layout: Block and Inline
Product: Firefox for Android → Core
Looks like the issue is with shrinkwrapping, right? In particular, doing this: display:block; width: -moz-fit-content; makes the <article> too wide just like inline-block does. And the reason for that is that the <article> contains a <div> which contains a <p> which contains an <img width="760">. So the minimal width when shrink-wrapping is going to be at least 760px. If Chrome is getting the same markup, I'd expect them to have the same behavior, at least based on their rendering of this testcase: data:text/html,<!DOCTYPE html><div style="border: 5px solid green; width: 200px"><div style="display: inline-block; border: 5px solid purple"><img src="http://www.mozilla.org/images/mozilla-banner.gif" width="400px"></div></div> So are they getting the same markup?
The <img> tag has a max-width:100% property in both Chrome and FF, but in Chrome it appears to resize the image down so that it fits in the available width.
A percentage max-width in a shrink-wrap situation means the behavior is undefined per spec, for whatever that's worth... In any case, sounds like this is a duplicate of bug 441046 or bug 823483?
Bug 823483 is the one with useful discussion here, by the way.
http://www.google.com/photos/about/ seems to be broken on Fennec as well, is that also due to this bug or that's a separate bug? This works alright in Chrome btw.
Depends on: 823483, 441046
Priority: -- → P4
Summary: Layout on Bing Blog broken → max-width:100% on image in shrink-wrap situation (inline-block) breaks layout on Bing Blog
Fixed by 823483
Status: NEW → RESOLVED
Closed: 10 years ago
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: