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.

About Lawrence Mandel

Firefox program manager
This entry was posted in mozilla and tagged , , , , . Bookmark the permalink.

5 Responses to Mobile Web Compatibility July 20, 2012

  1. Wes Johnston says:

    Those results seem slightly suspicious to me. Notably the Google ones (I’m not sure where the rest of that list of sites even came from…). I’ve dug into it by hand before and Google uses webkit-background-size and -webkit-linear-gradient (using the newer syntax if I remember correctly) extensively. Fixing things up didn’t require much work.

    There is also extensive use of -webkit-box which is not compatible with a straight -moz-box switch.

  2. Did the test build have aliases both in the CSSOM and in the CSS parser?

  3. Tantek says:

    This is great news Lawrence. Thanks for the analysis and post. Perhaps we can avoid mimicking -webkit- prefixes after all.

  4. pretzer says:

    I stumbled upon Typekit which is a font loading library / font hosting service by Adobe. They don’t support Firefox on Android yet, which can be seen on their support table here:
    http://help.typekit.com/customer/portal/articles/6786
    I think an outreach to them would be helpful because it seems to be fairly popular among major websites and already causes issues for example on the WIRED website, see:
    https://bugzilla.mozilla.org/show_bug.cgi?id=723131

Comments are closed.