Difference between revisions of "Platform/Layout/WebkitPrefixEmulation"
From MozillaWiki
(Remove number labels since mediawiki adds them automatically (in table of contents at least)) |
(Take colorful labels out of titles, so they don't clutter up table of contents at top of page) |
||
| Line 8: | Line 8: | ||
(actual URL after splash pages: http://h5.m.taobao.com/index2.html ) | (actual URL after splash pages: http://h5.m.taobao.com/index2.html ) | ||
| − | === http://map.baidu.com <span style="background:green;color:white">webkit-box-reliance</span> | + | === http://map.baidu.com === |
| + | * <span style="background:green;color:white">webkit-box-reliance</span> | ||
* (Lots of horizontal menus end up as vertical, in unpatched firefox, due to "display:-webkit-box" containers rendering as "display:block") | * (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 <span style="background:gray;color:white">fx-unrelated-bug</span> | + | === http://music.baidu.com === |
| + | * <span style="background:gray;color:white">fx-unrelated-bug</span> | ||
* I can't reproduce the bad rendering in the China team's screenshots. Maybe the site has been fixed? | * 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: | * Minor non-prefixing-related UI bugs: | ||
| Line 26: | Line 28: | ||
=== http://shucheng.baidu.com === | === http://shucheng.baidu.com === | ||
| − | === http://mogujie.com <span style="background:brown;color:white">broken-moz-box</span> <span style="background:purple;color:white">other-engine-unrelated-bug</span> | + | === http://mogujie.com === |
| + | * <span style="background:brown;color:white">broken-moz-box</span> <span style="background:purple;color:white">other-engine-unrelated-bug</span> | ||
* Navbar of pink circled icons don't show up in Firefox, due to "-moz-box" behavior {{bug|668837}} | * 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 [https://code.google.com/p/chromium/issues/detail?id=453182 Blink]/WebKit animation bug. | * Photo tiles don't show up in Firefox -- but that's because the site is unintentionally relying on a [https://code.google.com/p/chromium/issues/detail?id=453182 Blink]/WebKit animation bug. | ||
| Line 34: | Line 37: | ||
* UI issue: at http://m.dianping.com/citylist, "返回" (back) is centered (incorrectly) and title-text is overlaid on line below. | * UI issue: at http://m.dianping.com/citylist, "返回" (back) is centered (incorrectly) and title-text is overlaid on line below. | ||
| − | === http://m.qunar.com <span style="background:brown;color:white">broken-moz-box</span> | + | === http://m.qunar.com === |
| + | * <span style="background:brown;color:white">broken-moz-box</span> | ||
* 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") | * 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") | ||
Revision as of 19:49, 29 January 2015
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.
Contents
http://m.taobao.com
(actual URL after splash pages: http://h5.m.taobao.com/index2.html )
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
- 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
http://hao123.com
http://3g.qq.com
http://shucheng.baidu.com
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
- 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
- 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 in Blink/WebKit.
- 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.)
