1073222 - [MSNBC.com] The banner picture for most of the shows under the 'Watch' category clips off screen in portrait view

Status: RESOLVED DUPLICATE of bug 441046

(Web Compatibility :: Mobile, defect)

Description

[Robert Mead [:RobertM]]

Attachment: Flame2.1logcat.txt

Description:
When navigating to www.msnbc.com, if the user chooses one the shows under the 'Watch' category, in the resulting webpage, the show's banner picture trails off the side of the screen. There is no horizontal swipe, so there is no way to view the whole thing in portrait view.
   
Repro Steps:
1) Update a Flame device to BuildID: 20140925000204
2) Tap rocketbar and navigate to www.msnbc.com
3) Tap the drawer icon at the top and select 'Watch'
4) Choose one of the shows and observe
  
Actual:
The show's banner image trails off screen with no way to view it as a whole while in portrait view.
  
Expected: 
The show's banner image should fit on the screen properly in portrait view.

Notes: I checked 7 shows and out of them, only 1 had a banner that fit the screen properly in portrait view (The Rachel Maddow show)
  
Flame 2.1 (319mb)

Environmental Variables:
Device: Flame 2.1
BuildID: 20140925000204
Gaia: 8061ab487d42cbc49b329fd68b9ca90e0fe477e6
Gecko: e970bc96f8b5
Version: 34.0a2 (2.1)
Firmware: V180
User Agent: Mozilla/5.0 (Mobile; rv:34.0) Gecko/34.0 Firefox/34.0

  
Repro frequency: 6/7, 86%
See attached: screenshots, logcat

Comment 1

[Robert Mead [:RobertM]]

Attachment: CuttOffBanners.png

Comment 2

[Robert Mead [:RobertM]]

This issue does occur on Flame 2.2 (319mb), Flame 2.1 (512mb), and Flame 2.0 (319mb)

When on www.msnbc.com and selecting the 'Watch' category, most of the show's webpage's banner goes off screen.


Flame 2.2 KitKat Base (319mb)

Environmental Variables:
Device: Flame 2.2 Master
BuildID: 20140925040206
Gaia: c5d2e2f4ebf5f370d6003517057dcd47493dec90
Gecko: 32acbe1d64dc
Version: 35.0a1 (2.2 Master)
Firmware: V180
User Agent: Mozilla/5.0 (Mobile; rv:35.0) Gecko/35.0 Firefox/35.0


Flame 2.1 KitKat Base (512mb)

Environmental Variables:
Device: Flame 2.1
BuildID: 20140925000204
Gaia: 8061ab487d42cbc49b329fd68b9ca90e0fe477e6
Gecko: e970bc96f8b5
Version: 34.0a2 (2.1)
Firmware: V180
User Agent: Mozilla/5.0 (Mobile; rv:34.0) Gecko/34.0 Firefox/34.0


Flame 2.0 KitKat Base (319mb)

Environmental Variables:
Device: Flame 2.0
BuildID: 20140924183011
Gaia: 87ee41fcb3f9a14d7a8bb67f1dd7fd95a6bcd0f0
Gecko: b1cb27078909
Version: 32.0 (2.0)
Firmware: V180
User Agent: Mozilla/5.0 (Mobile; rv:32.0) Gecko/32.0 Firefox/32.0

Comment 3

[Derek Harris [:DerekH] - Dont need info. Last day 6/5/15]

Unable to nominate this as a blocker due to this being a tech evangelism bug, however this seems like a very poor user experience, as the user cannot see the full page.

Comment 4

[Hallvord R. M. Steen [:hallvors]]

img {
border: 0;
max-width: 100%;
height: auto;
}

In other words, this is bug 441046.

Comment 5

[Hallvord R. M. Steen [:hallvors]]

Having looked more closely at bug 441046 I see this needs a few more details to really verify that it's a dupe, but it is: the IMG we fail to shrink as expected is inside a DIV styled this way:

position:relative; display:table-cell; width:auto

Its parent is a DIV with 

position:relative; display:table; width: 100%

so it seems to fit the "IMG with max-width:100% inside TABLE" case in bug 441046 perfectly.