Web Compat at Mozilla

Taipei Office Brownbag

This is
a brown
bag

您好 MY NAME IS MIKE

Web Compatibility at Mozilla

The Internet is a global public resource that must remain open and accessible.

Individuals must have the ability to shape the Internet and their own experiences on it.

The effectiveness of the Internet as a public resource depends upon interoperability (protocols, data formats, content), innovation and decentralized participation worldwide.

Web Compatibility Life Cycle

[I]f you consider the Web as an interconnected set of things, it sometimes looks like a living organism. In a biosphere...
new things grow on the dying and evolving things.

Web philosopher, Karl Dubost

Language Change

Soþlice on þam dagum wæs geworden gebod fram þam casere augusto. þæt eall ymbehwyrft wære tomearcod
Old English, ~1000AD
Forsoþe it is don, in þo daÿis a maundement wente out fro cesar august, þat al þe world shulde ben discriued
Middle English, ~1300AD
And it came to passe in those dayes, that there went out a decree from Cesar Augustus, that all the world should be taxed.
Early Modern English, ~1600AD

1066 A.D.

Bayeux Tapestry

Web Legacy

An incredibly brief historical tour of 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.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 (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 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.71 Safari/537.36 Edge/12.0

LETS LOOK AT SOME BUGS

What could go wrong?

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

What could go wrong?

        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

DOM PRO 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()

(Fixed in
Firefox 44)

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

*From Effective JavaScript

VENDOR PREFIXED 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;
        }

https://compat.spec.whatwg.org/

Bug 1170774: [meta] Implement some non-standard APIs for web compatibility

SO HOW CAN I GET INVOLVED?

webcompat.com

Report bugs
as a user

Help diagnose issues

Help contact sites

HIGH FIVE

miket@mozilla.com