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

RESOLVED FIXED

Status

defect
--
major
RESOLVED FIXED
5 years ago
4 months ago

People

(Reporter: chaochao.huang, Assigned: yliu)

Tracking

Firefox Tracking Flags

(Not tracked)

Details

(Whiteboard: [sprd367140] [webkitcss] [country-cn] [flexbox], )

Attachments

(5 attachments)

Reporter

Description

5 years ago
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
Reporter

Comment 1

5 years ago

Comment 2

5 years ago
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.
Severity: normal → major
Flags: needinfo?(kgrandon)
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.
Flags: needinfo?(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/
Component: Gaia::Browser → Mobile
Product: Firefox OS → Tech Evangelism
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.
Assignee: nobody → yliu
Blocks: 827633
Summary: [dolphin][browser][v1.4]The text displays overlapping on the Webpage → hao123.com sends outdated flexbox -webkit- properties to Android devices
Whiteboard: [sprd367140] → [sprd367140] [css] [country-cn] [flexbox]
Basically this is fixed by adding 6 lines of CSS to the original CSS. See this screenshot showing before and after the fix.
Posted file hao123-fixed.css
This is the full fixed CSS. 
There are a couple more details to fix for transitions and animations but nothing hard.
This is fixed by layout.css.prefixes.webkit; true
Status: NEW → RESOLVED
Closed: 3 years ago
OS: Gonk (Firefox OS) → Android
Resolution: --- → FIXED
Whiteboard: [sprd367140] [css] [country-cn] [flexbox] → [sprd367140] [webkitcss] [country-cn] [flexbox]
Product: Tech Evangelism → Web Compatibility
You need to log in before you can comment on or make changes to this bug.