1254466 - Yahoo search bar not entirely visible on yahoo.com when browsing with a tablet

Status: RESOLVED FIXED

(Web Compatibility :: Site Reports, defect)

Description

[Flaviu Cos]

Attachment: yahoo.jpg

Environment: 
Device: Asus ZenPad 8 (Android 5.0.2);
Build: Nightly 48.0a1 (2016-03-07);

Steps to reproduce:
1. Launch Fennec;
2. Go to yahoo.com;
3. Observe the yahoo search bar.

Expected result:
The yahoo search bar is correctly displayed.

Actual result:
The search bar is not entirely visible and the search button is missing.

Notes:
Can not reproduce on One A2001 (Android 5.1.1);

Please check the attached screenshot.

Comment 1

[Brad Lassey [:blassey] (use needinfo?)]

Mike, are they not handling the screen size well?

Comment 2

[Mike Taylor [:miketaylr]]

Note: this seems to be a Tablet layout issue and it *doesn't* reproduce at us.yahoo.com or yahoo.com (depending on your locale, I guess). I do see the issue at ro.yahoo.com, like in Flaviu's screenshot.

You can also reproduce using the responsive design tools and making the viewport less than 620px.

And yep, Brad is right:

https://s.yimg.com/zz/combo?kx/yucs/uh3s/uh/359/css/uh_stencil_tablet-min.css&kx/yucs/uh3s/uh/450/css/sidebar-min.css&kx/yucs/uh3s/uh/346/css/stencil_mobile_light-min.css&kx/yucs/uh3s/uh/384/css/sidebar_light-min.css&kx/yucs/uh3s/atomic/84/css/atomic-min.css&kx/yucs/uh_common/meta/3/css/meta-min.css&kx/yucs/uhc/skip-links/4/css/skip-min.css

#searchbox-mojit {
  max-width: 40% !important;
}

That's behind a media query (max-width: 620px). If you remove that rule, it works as expected. It's possible that they're trying to make this look good on a single device

Comment 3

[Mike Taylor [:miketaylr]]

Karl, do we have good contacts at Yahoo?

Comment 4

[Karl Dubost💡 :karlcow]

What is the User-Agent of your device?
You can get it from http://echo.opera.com/
And the size of your viewport?
http://whatsmybrowsersize.com/

Comment 5

[Karl Dubost💡 :karlcow]

Ah also which flavor of Yahoo! are you reaching once you have entered yahoo.com?

Comment 6

[Karl Dubost💡 :karlcow]

Attachment: fx-android-tablet-without-max-width.png

ah for Yahoo! it is about https://ro.yahoo.com/?p=us 
according to the screenshot. I was asking because from experience the Yahoo! properties serve sometimes very different things. 

I can reproduce (even with different layouts for the rest of the page) on:

* https://www.yahoo.com/
* https://fr.yahoo.com/
* https://ro.yahoo.com/
* https://uk.yahoo.com/
* https://in.yahoo.com/

Note that this is happening with different type of user agents (I tried with the ipad one)

Android Tablets can have multiple factor sizes. 

I think they did that because they were not expecting tablet devices narrower than 621 pixels.

Removing the 
#searchbox-mojit {
	 max-width: 40%; 
}

doesn't really fix it. :) See the attached screenshot.
It soves it until you reach 581 pixels, then the mail icon is getting on top of the text.

I would probably replace by 

#searchbox-mojit {
	max-width: 100% !important;
}

and cater for the mail icon or the search form to display as an icon for small viewports.

I will contact Yahoo!

Comment 7

[Mike Taylor [:miketaylr]]

(In reply to Karl Dubost :karlcow from comment #6)
> Removing the 
> #searchbox-mojit {
> 	 max-width: 40%; 
> }
> 
> doesn't really fix it. :) See the attached screenshot.

Yeah, that's the problem, probably. It fixes it on my Nexus 7 tablet test device -- and I'm sure someone at Yahoo! was devving on some other test device that looks OK.

(Clearing ni? for Flaviu because his device details are in the initial description)

Comment 8

[Karl Dubost💡 :karlcow]

Contacted the person at Yahoo!

Comment 9

[Mike Taylor [:miketaylr]]

Thank you Karl.

Comment 10

[Karl Dubost💡 :karlcow]

This has been fixed.

Comment 12

[Karl Dubost💡 :karlcow]

We got a duplicate report (with Bug 1313348) 
I'm not sure we can do many things about it.
700px is the limit. This is happening with all browsers/devices (ipad, chrome).

So basically it is a design choice. They know about the issue as they have been contacted in the past and kind of fixed it.

Comment 13

[Mike Taylor [:miketaylr]]

I feel like issues like this where there's a better way™ to do things, and it affects all web browsers are valid Tech Evangelism issues that anyone in the community should be able to advocate for. But I don't think they're priorities for the Web Compat team -- too many bigger fish to fry, as it were. Perhaps we can signal that with a P5 in the future...

Comment 15

[Bogdan Surd, QA [:bsurd, NI]]

The issue is still reproducible, seems that a proper fix has not come out yet.