985276 - taobao.com fancy mobile site has broken layout in Firefox OS

Status: RESOLVED WONTFIX

(Web Compatibility :: Site Reports, defect, P5)

Description

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

The content we get with a iOS user-agent string is broken. This needs to be analyzed before we can ask them to send Firefox OS the fancy mobile site.

Comment 1

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

<div id="first-view"><div class="sliderwrap"><ul><li> ...

"#first-view ul" rule needs display:flex (has display: -webkit-box only). However, this is not sufficient - you get a stack of semi-overlapping "cards" without animation. This is because the width of the flex parent is set explicitly on element.style, but in WebKit based browsers it's set to 2664px, giving room for all the flex items to be laid out without overlap. In Firefox it's set to 360px.

Finally, "-webkit-transition" gets set on element.style to create the "slideshow" animation, needs to be just "transition".

Comment 2

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

I don't understand why the width is set wrong. It only occurs when the CSS fixup script is running and the UL has display:flex correctly applied.

The script calculates the width from the LIs inside the UL - seems the offsetWidth of these are reported differently when the parent is display:flex. (So, when the parent is flexbox, if there are 6 children the offsetWidth of each will be 1/6th of the parent or something? Obviously it doesn't work to sum up all the children to get a width of the box that will fit all children inside in that case - but why does this code seem to work in WebKit?)

Apart from that: the underlying script is better than expected, it has one "supports CSS transforms" and one "no transforms" branch. Unfortunately there is a subtle bug, perhaps introduced when copying code from Modernizer or minimizing the script. Consider:

		d = function() {
			var a = "WebkitTransform" in document.documentElement.style ? !0 : !1;
			return a
		}, e = function() {
			var a, b = !1,
				c = document.createElement("div"),
				a = ["&#173;", '<style id="smodernizr">', "@media (transform-3d),(-webkit-transform-3d){#modernizr{left:9px;position:absolute;height:3px;}}", "</style>"].join(""),
				d = document.documentElement.style;
			return c.id = "modernizr", c.innerHTML += a, document.body.appendChild(c), "WebkitPerspective" in d && "webkitPerspective" in d && (b = 9 === c.offsetLeft && 3 === c.offsetHeight), c.parentNode.removeChild(c), b
		}

and later on using if(e) and if(d). The variables e and d just reference the functions (which in a boolean context evaluate to true), they are not run to actually do the tests and evaluate the level of (webkit)transforms support. If they added some parentheses it would work better:

		d = (function() {
			var a = "WebkitTransform" in document.documentElement.style ? !0 : !1;
			return a
		})(), e = (function() {
			var a, b = !1,
				c = document.createElement("div"),
				a = ["&#173;", '<style id="smodernizr">', "@media (transform-3d),(-webkit-transform-3d){#modernizr{left:9px;position:absolute;height:3px;}}", "</style>"].join(""),
				d = document.documentElement.style;
			return c.id = "modernizr", c.innerHTML += a, document.body.appendChild(c), "WebkitPerspective" in d && "webkitPerspective" in d && (b = 9 === c.offsetLeft && 3 === c.offsetHeight), c.parentNode.removeChild(c), b
		})()

With that fixed, it just needs to 

a) Set width correctly on the UL
b) Set style.position = 'relative' on the UL

and the slider works perfectly.

Comment 3

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

(The code is in http://g.tbcdn.cn/mtb/app-index/0.5.8/combo.js )

Comment 4

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

I think we should try to reach out and suggest they add those missing parentheses, it looks like a clear bug. 

If they can do the CSS changes too it would be awesome ;)

Comment 5

[xshen]

Already contact taobao, but they don't have plan to fix it in short time.

Comment 6

[Karl Dubost💡 :karlcow]

fixed with layout.css.prefixes.webkit;true enabled

Comment 7

[Karl Dubost💡 :karlcow]

Closing as we are not working on Firefox OS anymore.