Operating System - Android Jelly Bean 4.1.1
Platforms - Smartphone and Tablets
Browser - Android Browser (please note that this doesn't seem to be an issue with Google Chrome on this version of Android)
jQuery Mobile Version - 1.2.0 RC2 (I've seen the problem on all 1.2.x versions but I did not go back to try on older versions)
I've been having a problem using an HTML5 canvas seemingly when I use it in conjunction with jQuery Mobile in the Android Browser on Jelly Bean 4.1.1. Initially I thought it might have been a problem with the Android Browser itself but I only seem to run into the problem when jQuery Mobile is included with the application. I know that jQuery Mobile doesn't directly do anything with the canvas element but it seems odd that I only seem to experience this problem when using jQuery Mobile and not if I implement the same functionality as a plain old HTML5 page with only jQuery. So, it appears to be an issue with the combination of that browser with jQuery Mobile and the HTML5 canvas element. I have been unable to narrow it down to any potential CSS specifications in the jQuery Mobile stylesheet that might be impacting this behavior.
The problem is that when the canvas is displayed from a jQuery Mobile page it displays a second slightly tiled/offset (to the left and top) version of the canvas contents on the same page. It doesn't appear to actually be a second canvas element, but some strange display oddity that causes the contents of the canvas to seemingly be displayed in two positions. When I first encountered the problem I thought that perhaps it was an issue with the Android browser itself, but I have been unable to reproduce the same behavior when I implement the same page without jQuery Mobile.
The other oddity is that this behavior only seems to occur if the size of the canvas uses dimensions greater than 256 pixels. Canvas dimensions less than this size don't seem to reproduce this same behavior.
Here are two JS Bin pages that show the two different implementations.
Plain HTML5/jQuery - http://jsbin.com/onohim
jQuery Mobile - http://jsbin.com/ejotok
For the jQuery Mobile version of the page, the second offset canvas sometimes doesn't appear until the page is refreshed a second time using the browser refresh button. If I add logic to be able to draw/doodle on the canvas, the second offset display appears on the initially loaded page as soon as you actually start drawing on the canvas. The referenced examples just create a canvas element and draws a background image into the canvas which either the first or second load of the page will display a second offset version of the canvas content.
Confirm exact same symptoms on that platform. An added border to the canvas element is not duplicated.
Edit: Symptoms disappear on absolute positioned canvas.
It appears that the specification of overflow-x: hidden on the ui-content class might be contributing to this behavior. Following is a JS Bin that removes this CSS attribute which doesn't seem to exhibit this behavior: http://jsbin.com/okilec
This seems like a change in behavior/implementation with Android Jelly Bean ( see http://code.google.com/p/android/issues/detail?id=35474 ) but I'm not totally sure about the effect of removing the overflow-x attribute on this class on the rest of the jQuery Mobile framework/widgets.
This doesn't appear to be an issue with jQuery Mobile itself other than due to the use of overflow-x: hidden on the ui-content class. This behavior can also be reproduced on a plain HTML5 page without jQuery Mobile: http://jsbin.com/olocal
Closing as not a jQuery Mobile issue. This appears to be an issue introduced with the Android 4.1 Jelly Bean update.
It is a browser quirk, and jQuery better handle it. For what reason should I use jQuery in the first place?
It is a browser issue but it has absolutely nothing to do with jQuery. That's the point demonstrated in that last JS Bin. jQuery is only used in that example as a selector for the CSS. If you don't believe it then here is yet another example that demonstrates the problem and doesn't use either jQuery or jQuery Mobile: http://jsbin.com/atehaf
There's nothing to convince either the jQuery or the jQuery Mobile teams that they need to "handle it" when it's a problem without those frameworks. Even if they did "handle it" it doesn't actually address the root cause of the problem because anyone not using jQuery will still have the problem.
Feel free to pursue with the jQuery team how they should try to tackle addressing an issue that occurs even when their library isn't even in use. But I want to see the actual root cause addressed instead of a workaround in a framework that has nothing to do with the problem.
I agree with @begmandev - if this is just an odd bug with Android that can be reproduced without jQuery or Mobile, this will be very difficult for us to patch up on our end.
FWIW I found this while searching for the generic problem, unrelated to jQuery Mobile. I am suffering the exact same symptoms (inexplicable offset re-render of the canvas), but I'm not using any framework.
barneycarroll, did you find any solution to this problem? jquery or not? thank you
@isommerituran I feel like an utter criminal posting this, but although I found a solution, I can't remember it, and the project I was working on is now closed off to me :(
FWIW I distinctly remember it being fixed with CSS tweaks. I was convinced, throughout, that the problem itself had nothing to do with jQuery.
this is what I found and worked as a solution:
Problem: duplicated canvas More info at: http://code.google.com/p/android/issues/detail?id=35474
Solution: Canvas parent element should not have css property "overflow" with value "hidden"
Do you use multiple pages in your html?
Facing the same problem...i have put up all the details related to this on my stackoverflow question
kindly let me know the solution to this
@prantikv please read above this is an android bug and several people have posted workarounds.