957527 - m.qzone.com login page - background to large, makes header messy

Status: RESOLVED FIXED

(Web Compatibility :: Site Reports, defect)

Description

[Hallvord R. M. Steen [:hallvors]]

Site: http://m.qzone.com
m.qzone.com login page - background to large, makes header messy

:: Steps To Reproduce

URL actually redirects to http://pt.3g.qq.com/s?aid=newqzone&go_url=http%3A%2F%2Fm.qzone.com%2Finfocenter%3Fg_f%3D%26sid%3D

1) Background picture is too tall, goes under navigation and header it's supposed to stay below.
2) This makes the rendering of the whole top of the page look messy

:: Expected Result

Same layout as other browsers

:: Actual Result

differences

:: Additional Information

Software Version: 1.1
Reporter's User Agent: Mozilla/5.0 (X11; Ubuntu; Linux i686; rv:26.0) Gecko/20100101 Firefox/26.0

Comment 1

[Hallvord R. M. Steen [:hallvors]]

Some CSS issues - fixing -webkit-background-size rules will solve it:

                "-webkit-background-size used without equivalents for .dl-guide header in http://m.qzone.com#inline_style0:5:299, value: 160px 138px,246px 103px",
                "-webkit-background-size used without equivalents for .dl-guide header.wifi in http://m.qzone.com#inline_style0:6:346, value: 160px 138px,246px 103px,cover"

there are some other issues of lesser importance too:

                "background used without equivalents for .qkbox,.pvbox in http://3gimg.qq.com/ptlogin/touch/css/ptlogin-sa.css?v=16:9:2, value: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f9fdff),\r\n\t\tcolor-stop(100%, #eaf1f5) )",
                "background-image used without equivalents for .banner[data-btn]:after in http://m.qzone.com#inline_style0:2:893, value: -webkit-gradient(linear,0 0,0 100%,from(#fff),to(#e2e2e2))",
                "-webkit-box-flex used without equivalents for .login input in http://m.qzone.com#inline_style0:2:9904, value: 1",
                "background-image used without equivalents for .btn in http://m.qzone.com#inline_style0:2:12013, value: -webkit-gradient(linear,0 0,0 100%,from(#27aff5),to(#078cd1))",

Comment 2

[xshen]

We have already contacted tencent. They are working on this website.

Comment 3

[Karl Dubost💡 :karlcow]

I put the fixed CSS at https://gist.github.com/karlcow/361c58005cfc7d731269
To help to get a quicker fix.

Comment 4

[Karl Dubost💡 :karlcow]

fixed by layout.css.prefixes.webkit;true