Closed Bug 1073222 Opened 5 years ago Closed 5 years ago

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

Categories

(Web Compatibility :: Mobile, defect)

ARM
Gonk (Firefox OS)
defect
Not set

Tracking

(b2g-v2.0 affected, b2g-v2.1 affected, b2g-v2.2 affected)

RESOLVED DUPLICATE of bug 441046
Tracking Status
b2g-v2.0 --- affected
b2g-v2.1 --- affected
b2g-v2.2 --- affected

People

(Reporter: rmead, Unassigned)

References

Details

(Whiteboard: [2.1-exploratory-2])

Attachments

(2 files)

Attached file 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
Attached image CuttOffBanners.png
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
QA Whiteboard: [QAnalyst-Triage?]
Flags: needinfo?(dharris)
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.
QA Whiteboard: [QAnalyst-Triage?] → [QAnalyst-Triage+]
Flags: needinfo?(dharris)
img {
border: 0;
max-width: 100%;
height: auto;
}

In other words, this is bug 441046.
Status: NEW → RESOLVED
Closed: 5 years ago
Resolution: --- → DUPLICATE
Duplicate of bug: 441046
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.
Depends on: 975632
Product: Tech Evangelism → Web Compatibility
You need to log in before you can comment on or make changes to this bug.