1094555 - hao123.com sends outdated flexbox -webkit- properties to Android devices

Status: RESOLVED FIXED

(Web Compatibility :: Site Reports, defect)

Description

[Chaochao Huang]

STR：
1. Open Wifi and the Browser app.
2. Enter into website 'www.hao123.com'
3. The text displays overlapping on the Webpage 

OBSERVED:
4. The text displays overlapping on the Webpage 

EXPECTED:
5. The text displays normally on the Webpage

Comment 1

[Chaochao Huang]

Attachment: a picture about the issue

Comment 2

[yong.ren]

Hi kevin:

    I don't know whether the website problem or our gecko layout engine problem, please help to 

    investigate, thanks a lot. 

   if you have any problem, needinfo for me, i will reply quickly.

Comment 3

[Kevin Grandon :kgrandon]

Attachment: Screenshot from desktop browser

This is a problem with their mobile site it appears, I don't think there's much we can do here. Here is a screenshot of their site on the desktop browser, resized to be smaller.

Comment 4

[Kevin Grandon :kgrandon]

I have not dug into their code, but my hunch is that this is probably an evangelism bug, or an INVALID bug.

If it helps, the mobile site is: http://m.hao123.com/

Comment 5

[Karl Dubost💡 :karlcow]

First of all, we have UA override applied for hao123.com Bug 827633
https://hg.mozilla.org/mozilla-central/file/tip/b2g/app/ua-update.json.in#l26

So it seems the version we are receiving from hao123.com with Firefox Android UA is a bit broken. Probably Webkit prefixes.

With the Firefox Android UA, we are redirected to:
http://m.hao123.com/?vit=h123&from=3w123

The parameters are important. For example accessing
http://m.hao123.com/
without parameters and with the real Firefox OS UA will get a very simple Web site.


It's relativey easy to fix. Like many Chinese Web sites, they are using -webkit-flexbox

.nav{
	width:100%;
	height:42px;
	padding:4px 0;
	background:#fff;
	border-bottom:1px solid #dadada;
	display:-webkit-box
}

For solving this, they can refer to:
https://github.com/webcompat/webcompat-howto/blob/master/book/tips/css-flexbox.md

I will show here how it can be fixed.

Comment 6

[Karl Dubost💡 :karlcow]

Attachment: before-after-hao123.jpg

Basically this is fixed by adding 6 lines of CSS to the original CSS. See this screenshot showing before and after the fix.

Comment 7

[Karl Dubost💡 :karlcow]

Attachment: hao123.css.patch

This is the patch for fixing the CSS
http://s0.m.hao123img.com/static/html5-index/css/index_2c2ec19.css

Comment 8

[Karl Dubost💡 :karlcow]

Attachment: hao123-fixed.css

This is the full fixed CSS. 
There are a couple more details to fix for transitions and animations but nothing hard.

Comment 9

[Karl Dubost💡 :karlcow]

This is fixed by layout.css.prefixes.webkit; true