HTML5 Canvas Issue with duplicate offset canvas display #5107

Closed
begmandev opened this Issue Sep 28, 2012 · 14 comments

Comments

Projects
None yet
8 participants
@begmandev

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.

@decatur

This comment has been minimized.

Show comment
Hide comment
@decatur

decatur Oct 7, 2012

Confirm exact same symptoms on that platform. An added border to the canvas element is not duplicated.

Edit: Symptoms disappear on absolute positioned canvas.

decatur commented Oct 7, 2012

Confirm exact same symptoms on that platform. An added border to the canvas element is not duplicated.

Edit: Symptoms disappear on absolute positioned canvas.

@begmandev

This comment has been minimized.

Show comment
Hide comment
@begmandev

begmandev Oct 10, 2012

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.

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.

@begmandev

This comment has been minimized.

Show comment
Hide comment
@begmandev

begmandev Oct 11, 2012

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.

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.

@begmandev begmandev closed this Oct 11, 2012

@decatur

This comment has been minimized.

Show comment
Hide comment
@decatur

decatur Oct 11, 2012

It is a browser quirk, and jQuery better handle it. For what reason should I use jQuery in the first place?

decatur commented Oct 11, 2012

It is a browser quirk, and jQuery better handle it. For what reason should I use jQuery in the first place?

@begmandev

This comment has been minimized.

Show comment
Hide comment
@begmandev

begmandev Oct 11, 2012

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.

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.

@toddparker

This comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker Oct 12, 2012

Contributor

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.

Contributor

toddparker commented Oct 12, 2012

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.

@barneycarroll

This comment has been minimized.

Show comment
Hide comment
@barneycarroll

barneycarroll Nov 29, 2012

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.

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.

@isommerituran

This comment has been minimized.

Show comment
Hide comment
@isommerituran

isommerituran May 29, 2013

barneycarroll, did you find any solution to this problem? jquery or not? thank you

barneycarroll, did you find any solution to this problem? jquery or not? thank you

@barneycarroll

This comment has been minimized.

Show comment
Hide comment
@barneycarroll

barneycarroll May 29, 2013

@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.

@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.

@isommerituran

This comment has been minimized.

Show comment
Hide comment
@isommerituran

isommerituran May 29, 2013

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"

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"

@WebmasterGrumpy

This comment has been minimized.

Show comment
Hide comment
@WebmasterGrumpy

WebmasterGrumpy Sep 24, 2013

Do you use multiple pages in your html?

Do you use multiple pages in your html?

@isommerituran

This comment has been minimized.

Show comment
Hide comment
@isommerituran

isommerituran Sep 25, 2013

Do you mean like a 'one page' application?
yes

On Wed, Sep 25, 2013 at 1:47 AM, WebmasterGrumpy
notifications@github.comwrote:

Do you use multiple pages in your html?


Reply to this email directly or view it on GitHubhttps://github.com/jquery/jquery-mobile/issues/5107#issuecomment-25051956
.

Do you mean like a 'one page' application?
yes

On Wed, Sep 25, 2013 at 1:47 AM, WebmasterGrumpy
notifications@github.comwrote:

Do you use multiple pages in your html?


Reply to this email directly or view it on GitHubhttps://github.com/jquery/jquery-mobile/issues/5107#issuecomment-25051956
.

@woutgg woutgg referenced this issue in Doodle3D/doodle3d-client Jan 30, 2014

Closed

Image drawn twice on Android browser #37

@prantikv

This comment has been minimized.

Show comment
Hide comment
@prantikv

prantikv Nov 9, 2014

Facing the same problem...i have put up all the details related to this on my stackoverflow question
http://stackoverflow.com/questions/26828662/canvas-doubling-in-jquery-mobile-phonegap-app
kindly let me know the solution to this

prantikv commented Nov 9, 2014

Facing the same problem...i have put up all the details related to this on my stackoverflow question
http://stackoverflow.com/questions/26828662/canvas-doubling-in-jquery-mobile-phonegap-app
kindly let me know the solution to this

@arschmitz

This comment has been minimized.

Show comment
Hide comment
@arschmitz

arschmitz Nov 10, 2014

Member

@prantikv please read above this is an android bug and several people have posted workarounds.

Member

arschmitz commented Nov 10, 2014

@prantikv please read above this is an android bug and several people have posted workarounds.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment