(Mobile) Compatibility on the World Wide Web

Mike Taylor, Mozilla

HELLO MY NAME IS MIKE

Maybe you know me from a few sites.*

*probably not

dotbiz.info

Mozilla Web Compat Team:: wiki

Open Web

Open Web Platform

The Open Web Platform is the collection of open (royalty-free) technologies which enables the Web. Using the Open Web Platform, everyone has the right to implement a software component of the Web without requiring any approvals or waiving license fees.

Some smart person from a wiki (probably Karl Dubost)

OK so like, what is web compatibility?

The problem is actually much, much larger.

Web Legacy

User Agent Strings

Mozilla/1.0 (Win3.1)

Mozilla/1.22 (compatible; MSIE 2.0; Windows 95)

Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.1) Gecko/20020826

Mozilla/5.0 (Windows; U; Windows NT 5.1; sv-SE; rv:1.7.5) Gecko/20041108 Firefox/1.0

Mozilla/5.0 (compatible; Konqueror/3.2; FreeBSD) (KHTML, like Gecko)

Mozilla/5.0 (Windows NT 6.0; U; en; rv:1.8.1) Gecko/20061208 Firefox/2.0.0

>Mozilla/5.0 (Macintosh; U; PPC Mac OS X; de-de) AppleWebKit/85.7 (KHTML, like Gecko) Safari/85.5

Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0)

Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/525.13 (KHTML, like Gecko) Chrome/0.2.149.27 Safari/525.13

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/32.0.1671.4 Safari/537.36 OPR/19.0.1310.0

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_0) AppleWebKit/537.22 (KHTML, like Gecko) Chrome/25.0.1364.172 YaBrowser/1.7.1364.22074 Safari/537.22

SNORT

What could go wrong?

        with(navigator) {
          Browser=appName;
          Version=parseInt(appVersion.charAt(0));
        }

What could go wrong?

Part 2 — The Wrongening™

        if(ua.indexOf('Firefox/3') !=-1) {
          type = "mp4";
          format = "mp4";
        } else if (ua.indexOf('Firefox') !=-1) {
          type = "webm";
          format = "webm";
        }
    
        Firefox/3.0   -> mp4
        Firefox/29.0  -> webm
        Firefox/30.0  -> mp4
        Firefox/39.0  -> mp4
        Firefox/40.0  -> webm
        Firefox/300.0 -> mp4

Web ECMAScript

String prototype extensions

        String.prototype.sup()
         
        > "bro".sup()
        "<sup>bro</sup>"

LETS LOOK AT SOME BUGS

DOM PROM BLEMS

window.orientation, 920342

            if (is_iphone || android) {
              var supportsOrientationChange = "onorientationchange" in window,
                  orientationEvent = supportsOrientationChange ? 
                                     "orientationchange" : "resize"
              window.addEventListener(orientationEvent, function() {
                if (window.orientation != 0)
                  badOrientation();
              }}

window.orientation != 0

undefined != 0

badOrientation()

JAVA SCRIPT WOES

Array.prototype.values(), 883914

            me.definitions.push('function ' + name + '(' + me.fnArgs + ') {',
                            ' try { with(values) {',
                            '  ' + action,
                            ' }} catch(e) {',
                            '}',
                      '}');

OBVIOUSLY

When `values` is an Array in that WithStatement, any reference to "values" in the body statement would become `values.values`, referring to Array.prototype.values instead of the original object.
883914#c13

*Buy Effective JavaScript!
(so Dave Herman doesn't
send his team of lawyers
my way for pirating this
wonderful screenshot)

spot the bug

            var f = someCondition ?
                    {entries: [{}, {}]} :
                    [{}, {}];
             
            if (f.entries) {
              explodeIfYouPassMeAnArray(f);
            }

Array.
prototype.
entries()

LITERALLY AN OUTHOUSE FULL OF PURE CSS

ehow.com, 733791

        .button {
          background:-webkit-gradient(linear,left top,right top,
                        from(#c5ccd4), color-stop(71%, #c5ccd4),
                        color-stop(72%, #cbd2d8),to(#cbd2d8));
        }

Fixed-ish

        .ChannelListing .crafts{
          background-color:#cfb793;
          background-image:url(/ui/images/mobile/skins/channel-listing/crafts.png);
          background-position-y:8px;
          background-position-x:7px;
        }
HTTP ISSUES

Bad Behavior 932498

            GET / HTTP/1.1

            Accept: */*

            Accept-Encoding: gzip, deflate, compress

            Host: www.sansimera.gr

            User-Agent: Mozilla/5.0 (Android; Mobile; rv:25.0) Gecko/25.0 Firefox/25.0

            

            HTTP/1.1 403 Bad Behavior

Spot the pattern?

            🙅 - "Mozilla/5.0 (Android; Mobile; rv:25.0) Gecko/25.0 Firefox/25.0"

            👍 - "Mozilla/5.0 (Android; Mobile; rv:25.0) Gecko/24.0 Firefox/25.0"

            👍 - "Android Mobile Gecko/24.0"

            👍 - "Android Mobile Gecko/1"

            👍 - "Android Mobile"

            🙅 - "Android Mobile Gecko/25"

            👍 - "Android Mobile Gecko/26"

            👍 - "Android Mobile Gecko/100"

🙅 - "Gecko/25"

OMG BUT
WHAT ABOUT
JQUERY

or facts, whatever.

OK THAT'S NOT SUPER COOL SO HOW CAN I HELP?

webcompat.com

Getting involved

Thanks!