www.ebparks.org - layout is messed up

[dholbert]

URL: http://www.ebparks.org/activities/camping
Browser / Version: Firefox 44.0
Operating System:
Problem type: Layout is messed up

Steps to Reproduce
0) Be using Firefox on Android, or firefox on Desktop with a mobile UA & a phone-sized browser window. (Tested both.)

1. Navigate to: http://www.ebparks.org/activities/camping
2. Scroll down to the photos, towards the bottom. (and/or try to scroll horizontally)

Expected Behavior:

• Photos should scale down to fit the viewport width.
• There should be no ability to scroll horizontally (because nothing should overflow off to the right.

Actual Behavior:

• Photos run off the right side of the page.
• As a result, the page is scrollable horizontally (but the photos are the only things overflowing into the off-screen area)

[dholbert]

[dholbert]

(For comparison: in Chrome for Android, the photos simply scale down to fit the page width.)

[dholbert]

INFO FROM DEVTOOLS: It looks like...
(1) The images are inside of a

which has "max-width: 100% and "width: 100%". (But tables are free to ignore their "width" attribute if their contents are wider than that.)

(2) The img elements themselves have "max-width: 100%" (that's as-applied to the width of their

, not the width of the table) This doesn't impact our intrinsic-width calculation for the table cell based on the images, though, I think due to https://bugzilla.mozilla.org/show_bug.cgi?id=823483 . (3) If I manually give the img elements "width: 100%" (or "200%" or any percent value really), then they don't overflow. I believe this is because this influences our intrinsic-size-calculation which we perform to size the table based on its cells' desired sizes. So I think our suggested fix might be to do (3)...

[karlcow]

fixed by https://bugzilla.mozilla.org/show_bug.cgi?id=823483