(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

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

User Agent Strings, continued

SNORT

What could go wrong?

        with(navigator) {
          Browser=appName;
          Version=parseInt(appVersion.charAt(0));
        } //document.write(Browser+" "+Version+" : ");
    

Web ECMAScript

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();
              }}
        

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!

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"

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

Getting involved!*

Thanks!