Preliminary results of aliasing Webkit CSS properties in Gecko analysis

The Mozilla Layout, QA, and Market Insight teams recently analyzed the impact of aliasing Webkit CSS properties in Gecko with the goal of answering the question,

Does aliasing a subset of Webkit CSS properties in Gecko improve mobile Web compatibility?

The results thus far indicate that there is a very small benefit of adding Webkit CSS aliases to Gecko. However, our research is not yet complete, so we will refrain from making any definitive decisions until all our research has been carried out.

The consensus from dbaron, jet, jsmith, tchung, aaronmt, jjensen, and me is that the value of aliasing Webkit CSS properties in Gecko alone appears to be pretty low and the benefit does not warrant its inclusion in the platform at this time.

I have posted an overview of our analysis, which led us to reach this initial conclusion, and the next steps for our investigation in the dev-platform group.

Posted in mozilla | Tagged , , , , , | Comments Off on Preliminary results of aliasing Webkit CSS properties in Gecko analysis

Mobile Web Compatibility Aug 10, 2012 – Google, YouTube, User Agents

Here’s what’s new in mobile Web compatibility this week.

Site testing and outreach

Google updated a number of their mobile sites this week to recognize Firefox for Android. First off, thanks to Google for making the effort to improve the experience of their sites – and they have definitely improved – in Firefox. As shown below, the Google content does still differ between Firefox and the Android stock browser. Even with the recent improvements, we would like to understand why the content differs. Are there Gecko limitations? Are there significant differences when coding for Webkit and Gecko? More investigation to come.

YouTube videos do not currently play on Firefox OS. On Android, Firefox kicks out to the YouTube app in order to play videos. At this point there is no standalone YouTube app on Firefox OS. However, Firefox OS does support H.264 encoded content, which means that we should be able to play YouTube videos natively on this platform. Jason Smith is following up on this issue for QA. I expect to have a better idea of the direction that we need to take to get YouTube working on Firefox OS shortly.

Community member r.brommauer reported that the Welt (according to Alexa, the 33rd most popular site in Germany) mobile site, m.welt.de, is broken in Firefox for Android. Browsing to welt.de in Firefox results in the desktop site being displayed. However, browsing directly to the mobile site results in an XML parsing error. As Aaron notes in the bug, it appears as though this is another user agent (UA) sniffing issue.

User agents

Aaron reran his screenshot analysis with the Firefox for Android UA, the Firefox OS UA, and a previously proposed Firefox OS UA that includes the “like Android” token:

Mozilla/5.0 (Gonk, like Android; Mobile; rv:12.0) Gecko/12.0 Firefox/12.0

As the results show, including “like Android” in the UA results in an improvement in the number of sites serving mobile content to Firefox OS. Notable sites that serve mobile content when using this UA include Google, YouTube, Bing, Yahoo, Amazon, MSN, and eBay. Aaron’s results are being discussed on the dev-b2g list.

As I mentioned last week, there was a discussion on the dev-platform list about whether the Firefox for Android tablet UA should follow the Internet Explorer 10 model and use “Touch” instead of “Tablet”. As reported in the forum and in the related bug, the result of the discussion is that there will be no change to the Firefox for Android tablet UA.

Posted in mozilla | Tagged , , , , , , , , | Comments Off on Mobile Web Compatibility Aug 10, 2012 – Google, YouTube, User Agents

Mobile Web Compatibility Aug 3, 2012 – Bing, IMDB, JQuery Mobile, Firefox OS

Here’s what’s new in mobile Web compatibility this week.

Site testing and outreach

The Bing team over at Microsoft recently updated the search engine’s mobile site to recognize Firefox for Android. The Bing experience on Firefox is now pretty great. Go check it out. I can wait.

A little while back I submitted a request to the Internet Movie Database (IMDB) to recognize Firefox for Android and redirect our users to their mobile site. (That’s m.imdb.com for those playing along.) Other than the redirect, my experience has been excellent with IMDB mobile on Firefox. Good news. IMDB informed me this week that the site will be updated to recognize Firefox for Android by mid Aug. I’ll update again once the fix is in place.

Christian Heilmann spoke with the JQuery Mobile team and I’m pleased to report that their 1.2.0 alpha announcement includes support for Firefox for Android as an A grade testing platform.

Firefox OS

Alex Keybl announced this week that Firefox OS will ship on Gecko 17. This means changes to the platform in support of mobile Web compatibility (layout, DOM, performance) should land before Aug. 27, when Gecko 17 uplifts to Aurora.

The new Firefox OS user agent (UA) that I wrote about last week has landed. Matt Brubeck has added this UA to his Phony add-on for Firefox for Android, which should be updated on AMO shortly. If you haven’t used Phony, it is an add-on that let’s you switch the UA that Firefox sends to sites. This tool can be very helpful when diagnosing mobile Web compatibility problems.

Aaron Train ran a screenshot analysis of 27 sites using the Firefox for Android UA and the Firefox OS UA with Firefox for Android. This small test set shows differences in site content in 62% (16/26) sites. (Amazon was inconclusive as the site test didn’t load with the Firefox OS UA.) While hardly a comprehensive study, it does appear as though the omission of the “Android” token in the UA string does result in significantly more desktop content being served to Firefox OS.

Firefox tablet UA

Gerv started a discussion on the dev-platform list this week about whether the Firefox for Android tablet UA should follow the Internet Explorer 10 model and use “Touch” instead of “Tablet”. Most of the response to this point resides in the “no” camp, but head on over and have your say. You can also follow along in bug 773355.

Posted in mozilla | Tagged , , , , , , , , | 1 Comment

Mobile Web Compatibility July 27, 2012

Here’s what’s new in mobile Web compatibility this week.

Firefox OS user agent string

A decision has been reached on the Firefox OS user agent (UA) string. I wrote about this in a separate post.

The Firefox OS UA will be:

Mozilla/5.0 (Mobile; rv:14.0) Gecko/14.0 Firefox/14.0

As a reminder, the Firefox for Android UAs are:

Mozilla/5.0 (Android; Mobile; rv:14.0) Gecko/14.0 Firefox/14.0

Mozilla/5.0 (Android; Tablet; rv:14.0) Gecko/14.0 Firefox/14.0

All Firefox UAs are documented in the Gecko user agent string reference.

MozCamp Europe proposal

Jason Smith and I have submitted a MozCamp Europe 2012 (Sept 8-9 in Warsaw, Poland) proposal entitled Opening Up the Mobile Web for Firefox. This will be a hands-on session teaching how to test mobile sites and report issues to site authors. Please provide your feedback and indicate interest in the wiki page.

As a side note, I am also the co-chair of the MozCamp Europe 2012 Firefox Mobile and Desktop track. I will be scheduling formal “office hours” later in August but you should feel free to get in touch with any questions about this specific MozCamp or track. I’m lmandel on IRC and can be found in the #mozcamp channel.

Site testing and outreach

Facebook delivered another fix to their site. The search bar layout now renders correctly in Firefox for Android.

Christian is in talks with jQuery Mobile and jQTouch about supporting Firefox mobile.

WURFL is a tool used by a number of sites for browser capability detection. Jean-Yves has been speaking with the WURFL author about including detection for Firefox for Android and Firefox OS.

Jean-Yves updated the Mozilla Developer Network (MDN) CSS transition docs. With the latest updates all docs on animations, transitions and transforms have been updated. Jean-Yves is currently working to bring the gradient docs up-to-date as well.

Jean-Yves reports that CSS unprefixing (see the Aurora 16 hacks post) has been received positively. Looking at CSS gradients specifically, Internet Explorer 10 supports unprefixed gradients and Opera will unprefix CSS gradients in Presto 2.12, leaving only Webkit with this set of properties prefixed.

Jason and Aaron documented how to test a site for mobile Web compatibility. The doc includes tool setup, test methodology, and reporting results. Take a read, run some tests and help the mobile Web!

Posted in mozilla | Tagged , , , , | Comments Off on Mobile Web Compatibility July 27, 2012

Decision Made! Firefox OS User Agent String

Update: There was a typo with the Firefox OS UA in the original post. The last version number in the UA has been corrected to 14.0.

A decision has been reached on the Firefox OS user agent (UA) string. A key point in the discussion about the UA was whether to include an “Android” token to help with mobile Web compatibility. The UA string for Firefox OS will not include any operating system token. Gerv summarized the rationale in the bug:

In absence of any new information, this decision is made. But here is a rationale summary: any OS identifier involving “Android” will lead to bugs like bug 777633 (serving of Android intents), the pushing of “install this Android app!” and other problems. Such problems will continually occur, and evangelising them is hard. UAs with “Gonk” or “B2G” as their OS identifier had the same content profile as UAs with no OS identifier at all. Leaving out the OS means we don’t have to change UAs when we change OS in the future, meaning we have less evangelism to do later. Having it different from Fennec Android makes market share determination a little easier. And finally, having no OS identifier is a strong values statement of “the web is the platform”.

The Firefox OS UA will be:

Mozilla/5.0 (Mobile; rv:14.0) Gecko/14.0 Firefox/14.0

As a reminder, the Firefox for Android UAs are:

Mozilla/5.0 (Android; Mobile; rv:14.0) Gecko/14.0 Firefox/14.0

Mozilla/5.0 (Android; Tablet; rv:14.0) Gecko/14.0 Firefox/14.0

All Firefox UAs are documented in the Gecko user agent string reference.

Posted in mozilla | Tagged , , , | 5 Comments

Mobile Web Compatibility July 20, 2012

I’m a few days late with this update due to some needed vacation but…

Here’s what’s new in mobile Web compatibility for the week ending July 20, 2012.

Webkit aliasing analysis

After our initial discussion last week, David Baron created a build of Firefox for Android that includes a number of Webkit CSS property aliases. John Jensen put together a short list of sites to test based on market analysis and top site data and Aaron Train and Jason Smith got to work testing these sites using David’s build to see what impact, if any, aliasing CSS properties has on site compatibility. The lot of us (plus Bob Moss) then met with the rest of the layout team to review the partial results.

The partial test results show that the experience of the majority of the sites in this set did not improve by adding Webkit CSS aliases. In one case the experience of the site was actually worse after adding the aliases. There are a couple of notable exceptions where the experience did significantly improve. In both of these cases the sites make heavy use of animations and transformations. Our next step is to investigate more sites that make heavy use of these two categories of CSS properties to see if the impact is more notable on this category of sites. We plan to review the new test results at the end of this week.

For those interested, here is the complete list of Webkit CSS properties that are aliased in the test build of Firefox for Android: -webkit-animation, -webkit-animation-delay, -webkit-animation-direction, -webkit-animation-duration, -webkit-animation-fill-mode, -webkit-animation-iteration-count, -webkit-animation-name, -webkit-animation-play-state, -webkit-animation-timing-function, -webkit-appearance, -webkit-border-bottom-left-radius, -webkit-border-bottom-right-radius, -webkit-border-radius, -webkit-border-top-left-radius, -webkit-border-top-right-radius, -webkit-background-clip, -webkit-background-origin, -webkit-background-size, -webkit-border-image, -webkit-box-shadow, -webkit-text-size-adjust, -webkit-transform, -webkit-transform-origin, -webkit-transform-style, -webkit-transition, -webkit-transition-delay, -webkit-transition-duration, -webkit-transition-property, -webkit-transition-timing-function, -webkit-user-select. The build also includes the following @-rule alias: @-webkit-keyframes.

Site testing and outreach

Our friends at Facebook now serve their touch optimized site to Firefox. (Thanks Facebook!) While there are some outstanding issues, the majority of the site is now functioning well.

Web framework/library investigation

More feedback on Web frameworks and libraries in use came in via the Mozilla WebDev team, a poll conducted by Christian Heilmann, and comments on my blog. Thank you to everyone who has contributed. The next step is to prioritize the list (Christian’s data and that from trends.builtwith.com will definitely help here) and get to work investigating. If you do use a framework or library and know of an issue please do file a bug, tell us about it on the compatibility mailing list, or comment on this post.

Documentation

Jean-Yves updated the Mozilla Developer Network (MDN) CSS animation docs to reflect the recent unprefixing.

Posted in mozilla | Tagged , , , , | 5 Comments

Mobile Web Compatibility July 13, 2012

Here’s what’s new in mobile Web compatibility this week.

CSS unprefixing

As Paul Rouget reported, this week the Firefox team unprefixed CSS3 animations, transitions, transforms and gradients. We also unprefixed the calc() function and IndexedDB. These changes are currently on the Nightly channel and targeted to be released in Firefox 16.

Web framework/library investigation

Our investigation will shortly start moving down a level in the stack from Web sites to Web frameworks and libraries. These can be either client or server side. What we are looking to identify is any framework or library that includes user agent sniffing or Webkit specific CSS generation or functionality.

We have a list of the top JavaScript Frameworks in use. The Mozilla Webdev team is working on a list of frameworks and libraries for other Web languages such as PHP, Ruby, and Java. Are you a Web dev? If so, please comment with the Web frameworks and libraries that you know to be most popular and of which you most make use so that we can get a good set for our investigation.

Webkit aliasing analysis

One possible mitigation for the proliferation of Webkit prefixed CSS properties is to support some of these properties in Firefox. Technically this can be achieved by providing Webkit prefix aliases for CSS properties that Firefox already supports. In fact, Opera has already adopted this tactic. At Mozilla, we have not yet made a decision about aliasing in Firefox.

As our current research has shown, the problems with the mobile Web extend beyond CSS prefixing to user agent sniffing and Webkit specific functionality. It is unclear that aliasing Webkit CSS prefixes in Firefox will provide much benefit to mobile Web compatibility. The Firefox Layout and QA teams kicked off an analysis this week to better understand the effect of aliasing. The results of this analysis will contribute to the discussion of whether we should consider aliasing any Webkit CSS properties in Firefox.

Site testing and outreach

Our compatibility report that tracks issues with mobile Web sites on Gecko has been published at arewecompatibleyet.com. The data in this report is driven off of data stored in Bugzilla. Please comment on this post if you have suggestions for making the report more useful.

Wikipedia includes video content in some of their pages. Playing the video content was previously thought to be fixed but unfortunately I discovered that although the play button is displayed, clicking play does not in fact play the video in any browser. Progress on this issue is tracked in Wikipedia bug 38305. As noted in the bug, as Wikipedia serves Ogg Vorbis content, Firefox on Android may be the only mobile browser capable of playing Wikipedia videos.

A scrolling issue was identified and reported to SeekingAlpha (bug 771949). Aaron reports that they have an engineer investigating the issue.

Aaron also verified the fix for PhotoSwipe.js that was reported last week. Thanks to PhotoSwipe for the fix!

Final call for review for UA sniffing and CSS property usage tool

The A-Team has put together a proposal to automate user agent sniffing and Webkit prefixed CSS property usage detection in the mobile Web. This is your final call for review. Feedback is requested by EOD Wed. July 18, 2012.

Posted in mozilla | Tagged , , , , , , | 2 Comments

Mobile Web Compatibility July 6, 2012

Here’s what’s new in mobile Web compatibility this week.

Mailing list

A compatibility@ mailing list has been set up for discussion of Web compatibility issues. Sign up to stay in touch with the lot of us working on mobile Web compatibility.

Site testing and outreach

PhotoSwipe.JS has been updated to recognize Firefox on Android. (Thanks PhotoSwipe!) Aaron Train will verify the fixes this coming week.

Jason Smith is organizing a mobile Web test event. Preliminary thoughts are to host a local event in the Mozilla Mountain View office where we will review the goals of the mobile Web compatibility effort and get people started on testing mobile sites and communicating issues back to the companies and individuals that run the sites. Jason has posted some ideas on an Etherpad. Let Jason or me know if you’re interested in attending. (This would be a good time to sign up for and post to the new compatibility mailing list.)

In order to support community involvement, Jason has put together a draft of a Testing Top Sites for Mobile Gecko Compatibility guide. We will be refining this guide over the coming week with a goal to publish it before the test event.

Posted in mozilla | Tagged , , , | 2 Comments

Mobile Web Compatibility June 28, 2012

Here’s what’s new in mobile Web compatibility this week. (Note: This post was slightly delayed as I didn’t get it published before the Canada Day weekend.)

Firefox for Android release!

Maybe you heard that the Firefox for Android rewrite released this week. Yes it did. The initial reviews are resoundingly positive. You can read some here, here, and here.

Site testing and outreach

Twitter released an update to their mobile site and it is now working very well in the newly released Firefox for Android. Thanks Twitter!

We will be wrapping the call for comments on the A-Team proposal to automate user agent sniffing and CSS property usage issues in the long tail of the Web. Next week the feedback will be incorporated and the proposal revised at which point a final call for review will be sent out. Give it a read and let us know what we can do to make this tool useful for you.

Lawrence smoke tested the NHL, NBA, MLB, and NFL sites this week and, along with reading some sports news, filed a few bugs. Overall these sites work pretty well in Firefox with, for the most part, minor issues.

Compatibility redux

The mobile Web compatibility effort is not the first Mozilla compatibility effort. Over 10 years ago, before Firefox 1.0 released, a number of people embarked upon a compatibility effort to push the Web towards standards adoption. The problem back then was with sites not following Web standards and coding specifically for Internet Explorer. Today’s problem is somewhat different as mobile Web site authors do use standard technologies such as HTML, JavaScript, and CSS, however, they use non standard properties and practices. Asa Dotzler joined today’s mobile Web compatibility meeting to give us a history lesson from the previous effort. Here are some of the points that Asa made that I think are notable (full notes in this week’s minutes):

  • Duration: the previous effort lasted~5 years. This time around we’re in a different and I think better position. In most cases today we are not advocating for entire site rewrites. The scope of the problem also seems to be smaller in that the size of the mobile Web is nowhere near the size of the Web itself. (Many of the long tail sites don’t yet have mobile versions.)
  • Tactics: The previous effort used many of the same tactics that we are already using today: a tech evangelism team was created (and still exists), documentation about standards based coding practices was written, and we worked with top sites such as MSNBC and ESPN directly to fix issues. We are doing all of these things again today and have already engaged with top sites including Google, Facebook, Twitter, and Instagram.
  • Show value: Back in the Firefox 1.0 days, the effort emphasized the value of moving to standards based Web development. This included reduced maintenance and hosting costs (by using technologies and techniques that better support caching). Once Firefox 1.0 released, they were also able to leverage the ~5% market share that Firefox had accumulated to drive adoption. We too should push on the value proposition of working with standards. We can use the combined market share of Firefox for Android, Opera mobile, and Internet Explorer mobile to show the market that sites are missing when only coding for Webkit.
  • Change Gecko: While we were hesitant to compromise our values and try to mimic Internet Explorer’s DOM in the name of compatibility, we did take a practical approach. As part of the previous effort we added features to Gecko that helped compatibility, such as implicit support for docment.all. We should continue be careful in the type of changes that we make to our platform but should balance idealism with pragmatism and consider changes where they make sense and can favourably affect the mobile Web and Web standards.
  • Engage community: We previously created e-mails and templates to help users contact sites. We are currently working on the tools that the community needs to contribute. This includes documentation on how to test and how to contact sites.

Message when contacting site authors

Here are two key messages when contacting site authors:

  1. The mobile compatibility effort is about opening up the mobile Web. While Firefox is a part of the mobile Web it is not the only browser.
  2. Browser detection or user agent (UA) sniffing should be discouraged in favour of feature detection. However, if a site is going to make use of UA sniffing, we should encourage sniffing for the mobile identifier “Mobi” instead of “Android”. (Note: “Mobi” is preferred to “Mobile” in order to support Opera.) It is important to detect the mobile identifier as Firefox currently runs on Android and B2G and has the potential to run on more platforms in the future. We need to push a strategy that prevents the need to contact sites every every time Firefox supports a new platform.

Related Conversations

The B2G/Gonk user agent string discussion is still going in the dev-planning mailing list.

Posted in mozilla | Tagged , , , | 2 Comments

Mobile Web Compatibility June 22, 2012

Here at Mozilla we are working tirelessly toward two new mobile releases: the revamped Firefox for Android and Boot to Gecko (B2G), a mobile phone that’s powered by the Web. With both of these efforts Mozilla controls only part of the user experience – delivering the products. The other part of the user experience is controlled by the mobile Web content that is available. Sadly, the state of the mobile Web is not one of standards compliance but one of Webkit specific functionality. This is not surprising as the default browsers on the iPhone and on Android devices are both built on Webkit. Developers have simply been conditioned to code for the Webkit based browsers on these platforms. However, this does pose a problem for browsers like Firefox, Opera, and, believe it or not, Internet Explorer that use different rendering engines. (The rendering engines for these three browsers are Gecko, Presto, and Trident.)

A number of us at Mozilla have banded together in the mobile Web compatibility effort in order to open up the mobile Web to non Webkit based browsers. (I do want to note that while our goal is to open up the mobile Web the majority of our testing is done with Firefox.) This effort is similar in many ways to the evangelism that went along with the original Firefox release to move the Web from Internet Explorer and ActiveX specific content to standards based content.

This is a big problem that needs many hands for testing and for developer and site outreach. A mailing list will be set up shortly to help coordinate and we meet Thursdays at 9am PT to talk about life, the universe, and everything…related to mobile Web compatibility. Here are the meeting details if you’d like to join us:

Dial-in: conference# 95346
US/International: +1 650 903 0800 x92 Conf# 95346
US toll free: +1 800 707 2533 (pin 369) Conf# 95346
Canada: +1 416 848 3114 x92 Conf# 95346
Vidyo: PB&J
IRC: #planning

I will venture to post status for this effort each week. On that note, here what’s new this week.

Site testing and outreach

The YouTube team updated their site to recognize Firefox for Android and serve Firefox mobile content. (Thanks YouTube!) Unfortunately we hit an issue in Firefox for Android playing the video content that is served by the YouTube mobile site. We’ve worked around this issue temporarily in bug 766914 while we investigate a cleaner solution.

Twitter has been actively working with us on a number of changes to that will allow their mobile site to function well on Gecko. The Mozilla QA team verified a number of fixes this week and it looks like Twitter will be fully functional on Gecko in the near future.

Lawrence smoke tested a number of sites and found that the following sites all serve consistent content (this means some do not have a mobile site) across browsers: Amazon, AOL, Craigslist, ESPN, Fandango, Paypal, Pinterest, and The Weather Network. Issues were discovered while testing the following sites: CNN (bug 766951), CNET (bug 766958), and Yelp (bug 766943).

The A-Team has put together a proposal to automate user agent sniffing and CSS property usage issues in the long tail of the Web.

Related Conversations

With a new platform (B2G/Gonk) comes a new opportunity to discuss user agent strings. That discussion is happening in the dev-planning mailing list.

In relation to developer outreach, here’s an Etherpad where people are discussing what makes a good quality app?

Posted in mozilla | Tagged , , , | Comments Off on Mobile Web Compatibility June 22, 2012