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; }

(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.

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.

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.

A screenshot of what Yahoo! Japan looks like currently on UCWeb (blink).

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.

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.

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.