This site will have limited functionality while we undergo maintenance to improve your experience. If an article doesn't solve your issue and you want to ask a question, we have our support community waiting to help you at @FirefoxSupport on Twitter and/r/firefox on Reddit.

Avatar for Username

Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

This thread was archived. Please ask a new question if you need help.

HTML5 Canvas Scrambles on Firefox for Android

  • 1 reply
  • 7 have this problem
  • 5 views
  • Last reply by Kevin

Mohamed Chaara
Mohamed Chaara
more options

Good day Everybody. I hope that this is the proper channel to ask this. I am using firefox as an application platform (The application is built with PHP). A part of the application is a signature pad designed with HTML5 canvas. The pad is based on the code available here: http://www.zetakey.com/codesample-signature.php

For testing I have used an iPad with iOS 6 and Safari renders the signature pad correctly. I have tried the same on a HUAWEI mediapad 10 using firefox and the canvas itself scrambles. This is not an issue when the same is loaded on google chrome using the same tablet.

The specs of the device and firefox version are as follows: OS: Android 4.1.2 Kernel Version: 3.0.8 Firefox Version: 29.0.1

The signature pad on firefox is rendered as follows: http://i.stack.imgur.com/EGaao.jpg

The signature pad on chrome is rendered as follows: http://i.stack.imgur.com/y38Vs.jpg

While an obvious solution would be shifting to chrome, there are some elements on the design that require some features that are only available on Firefox for android since it behaves as a full fledged browser. My question is: since the code is working on chrome and on safari there are no issues with it from my point of view, is this a bug on Firefox, or am I missing something?

The code and a fiddle can be viewed here:

http://jsfiddle.net/3KHAf/

Any Thoughts?

Good day Everybody. I hope that this is the proper channel to ask this. I am using firefox as an application platform (The application is built with PHP). A part of the application is a signature pad designed with HTML5 canvas. The pad is based on the code available here: http://www.zetakey.com/codesample-signature.php For testing I have used an iPad with iOS 6 and Safari renders the signature pad correctly. I have tried the same on a HUAWEI mediapad 10 using firefox and the canvas itself scrambles. This is not an issue when the same is loaded on google chrome using the same tablet. The specs of the device and firefox version are as follows: OS: Android 4.1.2 Kernel Version: 3.0.8 Firefox Version: 29.0.1 The signature pad on firefox is rendered as follows: http://i.stack.imgur.com/EGaao.jpg The signature pad on chrome is rendered as follows: http://i.stack.imgur.com/y38Vs.jpg While an obvious solution would be shifting to chrome, there are some elements on the design that require some features that are only available on Firefox for android since it behaves as a full fledged browser. My question is: since the code is working on chrome and on safari there are no issues with it from my point of view, is this a bug on Firefox, or am I missing something? The code and a fiddle can be viewed here: http://jsfiddle.net/3KHAf/ Any Thoughts?

Modified by Mohamed Chaara

All Replies (1)

Kevin
Kevin
  • Moderator
more options

Looks to be a device specific issue. The jsfiddle works fine on a Nexus S, Nexus 4, Nexus 5, Galaxy S4, and a LG Optimus Net Dual.

Filing a bug at https://bugzilla.mozilla.org/enter_bug.cgi?product=Firefox%20for%20Android&component=Graphics,%20Panning%20and%20Zooming would be good. Though I don't think we have a HUAWEI mediapad 10 in our device library.

Modified by Kevin