Messy rendering on Yahoo Japan mobile site

RESOLVED FIXED

Status

defect
RESOLVED FIXED
6 years ago
5 months ago

People

(Reporter: hsteen, Assigned: karlcow)

Tracking

Firefox Tracking Flags

(Not tracked)

Details

(Whiteboard: [mobile-compat-form] [webkitcss] [country-jp][contactready] [serversniff], )

Attachments

(4 attachments)

Site: http://m.yahoo.co.jp
Messy rendering on Yahoo Japan mobile site

:: Steps To Reproduce

1. load
2. watch
3. sigh


:: Expected Result

prettiness

:: Actual Result

-webkit-messiness

:: Additional Information

Software Version: 27
Reporter's User Agent: Mozilla/5.0 (Android; Mobile; rv:23.0) Gecko/23.0 Firefox/23.0
Flexbox isn't what I'm most familiar with, but this looks relevant:

.header__items {
display: -webkit-box;
display: box;
-webkit-box-align: stretch;
box-align: stretch;
}
Status: UNCONFIRMED → NEW
Ever confirmed: true
(in related and unsurprising news, they serve the desktop site to Fx OS. Just as well when the mobile site is -webkit-borked)
Yes. For Yahoo! Japan Web developers who will be reading this in the future.
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes
http://caniuse.com/#feat=flexbox
https://developer.mozilla.org/en-US/docs/Web/CSS/flex

  display: box; 

is the old flexbox version. The standard way to declare flexbox is 

    display: flex;
or  display: inline-flex;

Note also that stretch doesn't exist.
Hardware: Other → ARM
Whiteboard: [mobile-compat-form] → [mobile-compat-form] [webkitcss]
Whiteboard: [mobile-compat-form] [webkitcss] → [mobile-compat-form] [webkitcss] [country-jp]
Adding "display: flex" to CSS for .header__items and .header classes fixes top menu rendering. The rest of the page will presumably be fixed by similar measures.
Whiteboard: [mobile-compat-form] [webkitcss] [country-jp] → [mobile-compat-form] [webkitcss] [country-jp][contactready]
adding Mozilla Japan's members.  They have a contact to Yahoo Japan.
So I spent a bit more time on understanding the stylesheet of Yahoo! Mobile Japan.

Most of the issues are created by using the old syntax of Flexbox (-webkit- and prefixless). By using the new flexbox syntax, they will be able to fix most of the issues for Firefox Android, but also it will work nicely with Microsoft and Chrome and all modern browsers.

So it's a big win to go that way. It's possible to fix it in one day given the couple of hours I spent on it.
Just as a note. For now, instead of showing a broken mobile page, Yahoo! Japan has decided to redirect to the desktop home page. So at least it's more usable. 
A better solution would be to fix the CSS for mobile. Working on the business case for that now.
Assignee: nobody → kdubost
Status: NEW → ASSIGNED
Posted image yahooJP-ucweb-30.png
A screenshot of what Yahoo! Japan looks like currently on UCWeb (blink).
Posted image yahooJP-fxand-30.png
A screenshot of what Yahoo! Japan looks like on Firefox 30 on mobile, because of Yahoo! CSS not being up to date to the latest Flexbox standard syntax (aka using obsolete WebKit syntax). 
http://caniuse.com/#feat=flexbox
Still the case as of today.
* Yahoo! Japan redirects Firefox Android to the desktop site (by choice because) 
* The CSS is still webkit only.
Whiteboard: [mobile-compat-form] [webkitcss] [country-jp][contactready] → [mobile-compat-form] [webkitcss] [country-jp][contactready] [serversniff]
Mozilla Japan will contact Yahoo! Japan soon.
Yahoo! Japan's top site changes to new design today.

They still redirect to PC site, but some flexbox issues may be fixed.
Posted image new-yahoo-japan.png
This is the screenshot for the new design of Yahoo! Japan Mobile site.
This seems to be fixed!!!


We just need to ask them to redirect both Firefox OS and Firefox Android to the mobile site.

Thanks a lot Makoto-san
I will close that bug which is about the messy rendering of Yahoo! Japan on http://m.yahoo.co.jp/ with Gecko. Because this has been fixed. I will open another bug for the redirection.
Status: ASSIGNED → RESOLVED
Closed: 4 years ago
Resolution: --- → FIXED
Product: Tech Evangelism → Web Compatibility
You need to log in before you can comment on or make changes to this bug.