811421 - Deep dive investigation for busted sites

Status: RESOLVED FIXED

(Web Compatibility :: Site Reports, defect)

Description

[Lawrence Mandel [:lmandel] (use needinfo)]

To further our investigation into site issues that we may be able to fix via changes to our platform, we want to do a deep dive site investigation on a short list of sites. These sites continue to be broken in Firefox even after aliasing Webkit CSS properties in our browser. Each of the sites is listed below along with the problem description from QA.

What we need is 
1. the specific causes of breakage for these sites
2. the specific lines of code (as examples)
3. what properties/values are causing issues

Ideally we should be able to hack the content to dig past each issue in order to expose any deeper issues and create a complete list of site issues. Success is to have a list of all changes required for a functional site.

www.directv.com
1. Completely broken on FF Android. Appears to be broken by looking for the Webkit JavaScript value “WebkitPoint” that does not exist in Gecko.

m.doctissimo.fr
1. White screen renders on page
    
ocn.ne.jp
1. Slideshow of icon shortcuts don’t allow swiping left and right
2. Missing colors on certain buttons.

jutarnji.hr
1. ads and transitions within ads are not shown correctly
    
m.allhiphop.com
1. colors for refresh button are not right
2. text is occasionally blacked out when scrolling page
    
beyond.com
1. ads don’t render
    
carsensor.net
1. very obvious layout issues in comparison to Android stock browser

QA's results from this study can be seen at
https://docs.google.com/spreadsheet/ccc?key=0AiOpueKMbyhudDVUZW5NVWt1aUJvZWFZaDlMUHJVdlE#gid=3

I have also blogged about this site investigation at http://lawrencemandel.com/2012/11/05/call-for-help-broken-site-deep-dive-investigation/

Comment 1

[Josh Matthews [:jdm]]

beyond.com yielded bug 812154. m.doctissimo.fr yielded bug 812197, but the site also doesn't display in desktop Firefox due to a JS error when attempting to redirect away from the mobile site (FF on mobile is also redirected, hence the filed bug). I'm digging deeper to figure out what the problem is there.

Comment 2

[John Schoenick [:johns]]

I created an etherpad for tracking what has been investigated here:
https://etherpad.mozilla.org/Gbv7ERH9qL

Directtv.com looks to be using multiple CSS transform APIs we don't implement, including bug 717722 and webkit-specific functions such as webkitConvertPointFromNodeToPage

Comment 3

[John Schoenick [:johns]]

Filing bugs for specific sites per jst

Comment 4

[John Schoenick [:johns]]

Filed 815442 for carsensor.net. This site has a ton of -webkit- prefixing going on, including the very different -webkit-gradient() syntax, and also requires flexbox support, which isn't enabled in builds yet (bug 797022)

Works decently with those two things fixed:
http://people.mozilla.org/~jschoenick/carsensor.net_fixed_mobile.png
\o/

Comment 5

[John Schoenick [:johns]]

jutarnji.hr is also bug 812154. ads work as expected with spoofed user agent

Comment 6

[John Schoenick [:johns]]

m.allhiphop.com appears to work fine in nightly. The refresh button issue is a site bug that can appear in the stock browser as well, caused by the transparent title bar overlapping the transparent refresh button.

I could not reproduce the text blacking out issue, though scrolling rapidly causes a blurry lower-res rendering of the site to be used for a few frames, which seems to happen when it can't keep up (rather than checkerboarding)

Comment 7

[John Schoenick [:johns]]

Filed bug 815823 for www.ocn.ne.jp

The biggest breakage (scrolling the menu) is due to deprecated event style (using window.event) that is an easy fix for the site authors. The other big issue, other than tons of -webkit- prefixes, is that our border-image implementation seems to differ with -webkit-border-image, resulting in rendering breakage even if it is unprefixed.

Comment 8

[John Schoenick [:johns]]

All sites here are investigated now, the full info for each site is recorded on https://etherpad.mozilla.org/Gbv7ERH9qL

Summary
- www.ocn.ne.jp and carsensor.net are using a ton of webkit prefixed rules, and almost completely work with those mapped to proper unprefixed or -moz- rules, with a few exceptions:
  - Flexbox support, which we have but pref'd off (bug 783409)
  - border-image rendering differences vs -webkit-border-image (bug 548372 ?)
  - -webkit-gradient syntax is different from linear-gradient(), but renders properly when translated
  - Some properties have no gecko equivilents, but none of these seemed to cause significant bustage:
    - -webkit-text-fill-color
    - -webkit-text-stroke
    - -webkit-tap-highlight-color
    - -webkit-touch-callout

- directv.com is using CSS Transform javascript that are not supported in gecko, including WebkitCSSMatrix, WebkitPoint, and window.webkitConvertPointFromNodeToPage. This makes the page a non-starter, and cannot be simply stubbed out.

- m.doctissimo.fr uses a framework that doesn't detect FF Android properly (bug 812197) and uses a non-standard JS syntax for functions that could be fairly easily fixed by the authors (bug 585536)

- jutarnji.hr and beyond.com (and all google adsense sites) don't serve ads to Firefox Android's UA.

- m.allhiphop.com appears to be working properly

Comment 9

[Lawrence Mandel [:lmandel] (use needinfo)]

As John and Josh have completed the investigation (thank you both!) I'm resolving this bug as fixed.