Compatibility/Mobile/Libraries

Mobile Frameworks and Libraries

This wiki exists to document some of the research that the Web Compat team is doing around compatibility with existing and new (mobile) libraries and frameworks (i.e., jQuery Mobile, Zepto). Feel free to add links to issues or bugs, or start a new section. The end goal is to document current compatibility with Firefox OS and Firefox for Android and advocate within Mozilla for fixes to libraries where compatibility can be improved upon.

The commitgrep tool may be useful in this line of research.

jQuery

• "Incorrect $(window).width() in Firefox" [investigate][needsbug]
  • http://bugs.jquery.com/ticket/14210: closed invalid, seems a dupe of
  • http://bugs.jquery.com/ticket/4687*no2: closed WFM but comments suggest it might still be an issue
• ".children does not return direct child, but .find does [Firefox only]" [fixed][bugzilla-fixed][workaround]
  • http://bugs.jquery.com/ticket/13894
  • https://bugzilla.mozilla.org/show_bug.cgi?id=872853
  • fixed in 2f2e045ea66f320eee62b149a6b11f22aadb816b
• "Query doesn't work in a non-HTML document in UAs that have innerHTML on Element and create non-HTML elements via createElement" [fixed][bugzilla-fixed][workaround]
  • http://bugs.jquery.com/ticket/13754
  • https://bugzilla.mozilla.org/show_bug.cgi?id=858850*c8
  • fixed in c6a694e1c262acb941b7fd86663f186656496bbc
• ""no element found" in Firefox when $.post reply has no Content-Type" [open][bugzilla-open]
  • http://bugs.jquery.com/ticket/13450
  • https://bugzilla.mozilla.org/show_bug.cgi?id=884693
• "Resize event is triggered in the middle of a running function called by setTimeout, when calling elem.height()" [cantfix][bugzilla-open]
  • http://bugs.jquery.com/ticket/13376
  • https://bugzilla.mozilla.org/show_bug.cgi?id=840412 (apparently a regression)
• "document.ready not firing on Firefox, Opera with XSLT and XML" [open][bugzilla-open]
  • http://bugs.jquery.com/ticket/13193
  • https://bugzilla.mozilla.org/show_bug.cgi?id=325891
• "$(el).position().left returns wrong value in webkit browsers" [cantfix][bugzilla-open]
  • http://bugs.jquery.com/ticket/11813
  • http://bugs.jquery.com/ticket/11110
  • https://bugzilla.mozilla.org/show_bug.cgi?id=381328
• "Firefox focus and blur events not firing when calling focus() and blur()"[cantfix][needs-bugzilla]
  • http://bugs.jquery.com/ticket/13363 and http://jsfiddle.net/vKDe2/9/ (see note about possibly needing an iframe)
  • http://bugs.jquery.com/ticket/10557
  • possibly https://bugzilla.mozilla.org/show_bug.cgi?id=874488?

jQuery Mobile

• "iframes with a link to a page on the same document causes the full document to be loaded in the iframe on FF" [open][buzilla-open]
  • https://github.com/jquery/jquery-mobile/issues/5972
  • https://bugzilla.mozilla.org/show_bug.cgi?id=927842

Zepto.js

• https://github.com/madrobby/zepto/search?q=firefox&ref=cmdform&type=Issues

• "Zepto framework platform detection doesn't detect FF mobile as Android" [fixed]
  • https://bugzilla.mozilla.org/show_bug.cgi?id=812197
  • Fixed by https://github.com/madrobby/zepto/commit/d21ce64170873d3c691fbfad9ac7c698de887fdb

• "webkit will report a proper scrollTop() value on $('body') but will always be 0 on $('html') and FF will report a proper scrollTop() value on $('html') but will always be 0 on $('body')."
  • https://github.com/madrobby/zepto/issues/392

Sencha Touch

Tracking bug https://bugzilla.mozilla.org/show_bug.cgi?id=895485

Testing with Sencha Touch 2.3.0 (GPL): http://www.sencha.com/products/touch/download/sencha-touch-2.3.0/2920

"Sencha Touch is the only framework that enables developers to build powerful apps that work on iOS, Android, BlackBerry, Windows Phone, and Internet Explorer 10."

JS / DOM

• https://github.com/miketaylr/sencha-touch-2.3.0-gpl/blob/master/microloader/development.js#L65 would fail for "Mobile;" tokens in FxOS and F4A. Also found in https://github.com/miketaylr/sencha-touch-2.3.0-gpl/blob/master/src/core/class/Class.js#L534-L551. Changing the regex to /Mobile(\/|\s|;)/ should be enough to fix that though.

• https://github.com/miketaylr/sencha-touch-2.3.0-gpl/blob/master/src/data/proxy/Sql.js If an app is using the WebSQL proxy... there's not much to be done.

• https://github.com/miketaylr/sencha-touch-2.3.0-gpl/blob/master/src/device/SQLite.js, more SQLite as a possible compat issue

• https://github.com/miketaylr/sencha-touch-2.3.0-gpl/blob/master/src/env/OS.js#L16 Do we want to add FxOS?

• https://github.com/miketaylr/sencha-touch-2.3.0-gpl/blob/master/src/env/OS.js#L34 will probably fail for FxforAndroid, as the UA string has "Android;".

• https://github.com/miketaylr/sencha-touch-2.3.0-gpl/blob/master/src/fx/animation/Wipe.js#L44-L94 only including -webkit-gradients here.

• https://github.com/miketaylr/sencha-touch-2.3.0-gpl/blob/master/src/util/translatable/CssTransform.js#L20 missing other prefixes

• https://github.com/miketaylr/sencha-touch-2.3.0-gpl/blob/master/src/Anim.js#L206 Starting at line 206, there are tons of -webkit-only transform related props.

• Do we have a perf bug open for this? https://github.com/miketaylr/sencha-touch-2.3.0-gpl/blob/master/src/XTemplateCompiler.js#L15-L18

CSS

Note: these would all be fixed in the themes/stylesheets/sencha-touch/base/src/_Foo.scss files (I think).

• https://github.com/miketaylr/sencha-touch-2.3.0-gpl/blob/master/resources/css-debug/apple.css#L1260 should be updated to -moz-user-select: none;
• https://github.com/miketaylr/sencha-touch-2.3.0-gpl/blob/master/resources/css-debug/apple.css#L2234-L2238, -webkit-box only styles.
• https://github.com/miketaylr/sencha-touch-2.3.0-gpl/blob/master/resources/css-debug/apple.css#L3382-L3399, -webkit-mask-* properties; If they're only used in places like this button, it degrades gracefully: https://cloudup.com/c5H15TZzUfE
• https://github.com/miketaylr/sencha-touch-2.3.0-gpl/blob/master/resources/css-debug/apple.css#L4443-L4454, only has -webkit-appearance: none, and a .x-ie class that gets background: transparent; instead.
• https://github.com/miketaylr/sencha-touch-2.3.0-gpl/blob/master/resources/css-debug/apple.css#L589-L608, there's an x-firefox class that's being used to hide .x-dock-body (width:0, height:0). Unsure why...

Testing

Using the demos at https://miketaylr.com/bzla/tmp/examples/index.html for testing. Issues found so far:

• In Firefox Stable (but not Aurora), there's a paint issue when scrolling up, e.g., https://miketaylr.com/bzla/tmp/examples/nestedlist/index.html. The children get painted above the menu bar. But it's a non-issue in Aurora, so we can probably safely ignore.

• https://miketaylr.com/bzla/tmp/examples/forms/index.html, the Multiple Slider Thumbs component has issues in Firefox for Android stable, but not Aurora.

iScroll

Tracking bug: https://bugzilla.mozilla.org/show_bug.cgi?id=941076

0 results from commitgrep, http://miketaylr.github.io/commitgrep/iscroll.html

• https://github.com/cubiq/iscroll/blob/master/src/utils.js#L84-L85, seems like we'll end up as "is.badAndroid": filed https://github.com/cubiq/iscroll/issues/558. (which has been fixed as of 9 Jan 2014).

Other than that, version 5 (and the demos) seems to work well. Version 4 and below are totally broken. So we should encourage sites to upgrade when possible.

Fastclick

https://github.com/ftlabs/fastclick

See https://bugzilla.mozilla.org/show_bug.cgi?id=975467, the root cause being us sending double click events in some Fastclick code.

App.js

http://code.kik.com/app/2/index.html Note: "It is advised that you run your app in Chrome while simulating a mobile platform that you're targeting. Don't forget to turn on touch event emulation." in the docs.