Platform/Layout/WebkitPrefixEmulation

This page tracks the status of a project to emulate a subset of "-webkit" prefixed properties, for an extremely-strict list of sites that are broken on Firefox mobile builds & for which we've been unsuccessful at getting the sites to fix themselves. (bug 1107378)

The top 10 fixlist sites are listed on the bug page, with screenshots provided by the China team.

I've listed these sites below, and intend to provide labels for each one indicating their current brokenness state.

http://m.taobao.com

(actual URL after splash pages: http://h5.m.taobao.com/index2.html )

• webkit-box-reliance
• Lots of horizontal menus that end up vertical, due to -webkit-box elements becoming blocks in unpatched builds.
• Search field is wider than intended, due to reliance on "-webkit-box-sizing". (we can alias)
• If you tap search field, the icon in bottom-left (and the menu that it pops up) renders larger than intended, due to reliance on "-webkit-background-size" (which we can alias to 'background-size').

http://map.baidu.com

• webkit-box-reliance
• (Lots of horizontal menus end up as vertical, in unpatched firefox, due to "display:-webkit-box" containers rendering as "display:block")

http://music.baidu.com

• fx-unrelated-bug
• I can't reproduce the bad rendering in the China team's screenshots. Maybe the site has been fixed?
• Minor non-prefixing-related UI bugs:
  • 2nd tab for "rings" has linewrapping issue -- filed bug 1127107 (fixed now, by jfkthame)
  • 3rd tab for "artists" is missing arrow ">" icon at right edge of buttons-- not sure what's happening there, no bug filed yet
  • 3rd tab for "artists" only shows 1 row of artist photos, vs. 2 rows on Chrome. This seems intentional (though strange) - the site creates a fixed-height "gallery" div to contain these, and it gives the gallery a larger specified height to in Firefox vs. Chrome (in the style attribute).

http://3g.163.com

• I can't reproduce the bad rendering in the China team's screenshots. Maybe the site has been fixed? (or its content just changed)

http://hao123.com

• webkit-box-reliance unknown-bug
• (Lots of horizontal menus end up as vertical, in unpatched firefox, due to "display:-webkit-box" containers rendering as "display:block")
• After fixing that: photo previews still don't load, likely due to a site bug or a reliance on a particular DOM api. (The images have src="some-bogus-image-file" data-src="the-actual-image-file"; looks like some library is supposed to do something with that.)

http://3g.qq.com

• webkit-box-reliance other-engine-unrelated-bug
• Horizontal menus that end up vertical, due to -webkit-box elements becoming blocks in unpatched builds.
• Minor: After aliasing webkit properties, search box (2/3 of the way down the first screen) is still a bit too wide, due to a form of bug 1043520 -- needs a smaller "min-width" (e.g. 0) to let it shrink. We probably can't internally work around this without potentially breaking other content, so probably just ignorable.

http://shucheng.baidu.com

• webkit-box-reliance
• Horizontal menus that end up vertical, due to -webkit-box elements becoming blocks in unpatched builds.

http://mogujie.com

• broken-moz-box other-engine-unrelated-bug
• Navbar of pink circled icons don't show up in Firefox, due to "-moz-box" behavior bug 668837
• Photo tiles don't show up in Firefox -- but that's because the site is unintentionally relying on a Blink/WebKit animation bug.

http://dianping.com

• webkit-box-reliance
• UI issue: searchbar is pushed out of top bar
• UI issue: at http://m.dianping.com/citylist, "返回" (back) is centered (incorrectly) and title-text is overlaid on line below.

http://m.qunar.com

• broken-moz-box
• UI Quirk: If you adjust viewport-size (e.g. by rotating phone from landscape to portrait), button-tiles in grid don't adjust to fit new viewport. (Fixed if you replace "-moz-box" with "flex" in rule for ".qn_nav li")

Status Key for classification of UI issues that we're hitting

• webkit-box-reliance: Site has a UI issue caused by dependency on "-webkit-box" styles, with no fallback, & is fixed by emulating -webkit-box support.
• broken-moz-box: Site has a UI issue caused by misguided expectation that "-moz-box" behaves like "-webkit-box". (This generally prevents us from seeing "-webkit-box" & trying to emulate it, if "-moz-box" stuff comes after "-webkit-box" in their stylesheet.)
• fx-unrelated-bug: Site has a UI issue caused by a Firefox bug (not prefixing-related).
• other-engine-unrelated-bug: Site has a UI issue caused by accidental dependency on a bug or non-emulatable-behavior in Blink/WebKit.
• unknown-bug: Site has a UI issue caused by a not-yet-known bug. (unknown if it's a Firefox bug, a site bug, or a dependency on some other piece of webkit/blink-specific behavior.)