javascript - Android Native Browser duplicating HTML5 canvas (fine in chrome) -


this weird issue experiencing on native browser on samsung galaxy tab 2 , galaxy s2 in native browser.

this has been tested on other android phones , tablets such nexus 7 & galaxy s4 native browser chrome, appears fine. issue not present on ios browsers, windows desktop browsers or mac desktop browsers.

it's asif webpage loaded twice ontop of itself!

as there duplicate canvas element, updates main canvas does.

enter image description here enter image description here

here appears asthough happens when rotated in landscape mode, beleive in portrait mode, canvas' aligned on top.

what weirder, menu button see toggle button, tap open menu, tap close menu. on device when tap it, opens , closes instantly. same happens mute button toggle.

i'm @ loss.

i have done javascript debugging throwing in few alerts here , there, , initialisation functions create references canvas , on called once.

i have read , heard hardware acceleration causing issues, solutions i've potentially found relative building native apps! not html5 canvas webpages.

any insight on great! in advance.

--edit

i put in test alert(document.getelementsbytagname('canvas').length); see if there 2 canvas in dom returns 1!

i ran same issue. able fix running following code after making change canvas:

// if samsung android browser detected if (window.navigator && window.navigator.useragent.indexof('534.30') > 0) {      // tweak canvas opacity, causing redraw     $('canvas').css('opacity', '0.99');      // set canvas opacity normal after 5ms     settimeout(function() {         $('canvas').css('opacity', '1');     }, 5);  } 

by tweaking opacity, forced canvas redraw , removed duplicate shapes. it's dumb fix works. helps someone.


Comments

Popular posts from this blog

assembly - 8086 TASM: Illegal Indexing Mode -

Java, LWJGL, OpenGL 1.1, decoding BufferedImage to Bytebuffer and binding to OpenGL across classes -

javascript - addthis share facebook and google+ url -