1168302 - www.yahoo.com - News section not rendered properly in Firefox for Android

Status: RESOLVED WORKSFORME

(Web Compatibility :: Site Reports, defect)

Description

[Prasanna]

User Agent: Mozilla/5.0 (Android; Mobile; rv:38.0) Gecko/38.0 Firefox/38.0
Build ID: 20150514162810

Steps to reproduce:

Open following websites in Firefox for Android:
https://www.yahoo.com/tech/russia-plans-to-leave-apple-android-behind-by-119298514249.html
https://www.yahoo.com/tech/the-president-finally-got-an-iphone-sort-of-119295249154.html

Actually any article in https://www.yahoo.com/tech/ seems to have this issue.

My smartphone model: Moto X, 1st Gen running Android 4.4.4.


Actual results:

Page is not rendered properly: 
Width doesn't fit properly - extends out of the screen and we are required to scroll sidewards.
Scrolling down/up stutters and is not smooth.


Expected results:

Page is rendered perfectly fine in Chrome Android browser:
Width fits properly.
Scrolling is smooth.

Comment 2

[Kevin Brosnan [Ex-Mozilla]]

Possibly a dupe of 1114674

Comment 3

[Prasanna]

Maybe not related to Bug 1114674. 

I see that http://weather.yahoo.com/ works fine in my device.

Comment 4

[Prasanna]

Attachment: Screenshot_2015-05-29-12-32-23.png

Attaching screenshot for Comment 3.

Comment 5

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

Karl, I'll assume this is the "Yahoo properties send desktop content" you're working on (or was that just about .co.jp?)

Comment 6

[Karl Dubost💡 :karlcow]

yahoo.co.jp sends desktop content to Firefox (Android and Firefox OS). See https://webcompat.com/issues/1165

yahoo.com sends mobile content to Firefox. Current issues open about Yahoo! (Yahoo! Japan is a different company):

* Bug 1168302 www.yahoo.com - News section not rendered properly in Firefox for Android
* Bug 1014193 The user can not scroll up and down on images in Yahoo sports
* Bug 1114674 page layout is far too wide when compared with, e.g. Safari on iOS
* Bug 953240  Text cut off on mobile Yahoo, with a wide iframe being ineffectively clamped by "max-width: 100%", several layers deep inside of a -moz-box 


Yahoo! on the other hand is hard to test. It's very sensitive to geolocation.

As for this Bug https://www.yahoo.com/tech home page displays fine. But indeed individual articles are too wide. 

On   https://www.yahoo.com/tech/cut-from-google-i-o-what-didnt-make-the-stage-120129952559.html
At   `.pre-cut > figure:nth-child(1)`
There's an image which is `height="540" width="540"`

    <figure data-reactid=".0.$cover-mosaic-transition-group.$=1$cover-mosaic-0:0.$article-120129952559.0:$Pos-r.$article-inner-container.$inset-container.$grid-template.0.$col-left.$content.$grid-content.0.1.1.$text-body.0.0.$figure-0">
         <img src="https://s.yimg.com/cd/resizer/2.0/FIT_TO_WIDTH-w540/5fd021571b050b9cda8778cb7b0c4aadce615a56.jpg" alt="Cut From Google I/O: What Didn’t Make the Stage" height="540" width="540">
    </figure>


When setting the width to 100% everything is working 

Currently the style is 

.text-body img {
    max-width: 100%;
    height: auto;
    margin-right: 20px
}


As usual the max-width is not taken into account. But I haven't checked if there was a display: table involved. see Bug 434230




btw they are using old flexbox in some places such as:

.ct-box{
	min-height:100%
}

.ct-box,.yui3-sidebar .ct-box-hd,.ct-box-bd,.ct-h-nav,.ct-b-nav,.ct-id,.ct-box-bd .ct-stack,.ct-row,.ct-f{
	display:-webkit-box;
	display:-moz-box;
	display:-ms-flexbox;
	display:box
}

.ct-box-bd,.ct-id-name,.ct-b-nav,.ct-rl,.ct-l,.yui-sv-title,.ct-row .ct-row{
	-webkit-box-flex:1;
	-moz-box-flex:1;
	-ms-flex-order:1;
	box-flex:1
}

.ct-id-name{
	font-weight:700
}

.ct-box,.ct-box-bd .ct-stack,.ct-b-nav,.yui-sv-bd{
	-webkit-box-orient:vertical;
	-moz-box-orient:vertical;
	-ms-flex-direction:column;
	box-orient:vertical
}

.ct-h-nav,.ct-row{
	-webkit-box-align:center;
	-moz-box-align:center
}

Comment 7

[Prasanna]

Ping. Will this be fixed?

Comment 8

[Karl Dubost💡 :karlcow]

Prasanna. 

Did you try to contact Yahoo! ?
https://www.yahoo.com/tech/russia-plans-to-leave-apple-android-behind-by-119298514249.html


The issue is partly because of Bug 434230
And this is not fixed yet. It's a difficult bug.

Comment 9

[Prasanna]

(In reply to Karl Dubost :karlcow from comment #8)
> Did you try to contact Yahoo! ?
> https://www.yahoo.com/tech/russia-plans-to-leave-apple-android-behind-by-
> 119298514249.html

No, I did not. I don't know how to either.

Comment 10

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

If I go to yahoo.com front page and from there to the technology section through the menu it seems to work perfectly fine in Firefox on Android.