PhoneGap and Galaxy s4 render issue

Question

I'm experiencing a weird issue on GS4 device when using PhoneGap, where by some of my elements of my web app are not displaying properly when the page renders, yet once that page is clicked or pressed, the elements layout properly. A flickering white window accrued occasionally before translate events in my application.

The problem only accrued on GS4 and never accrued when I try it on other phones like GS4, Note or IPhone.

Answer 1

Are those elements dynamically generated? I too had the same issue, I figured out, it actually need some hardware acceleration(GPU acceleration). We should enable 3d rendering by css. Just use

transform: translateZ(0);

for the particular element. This worked for me, try it, may work for you.

pls check this link

Answer 2

the problem in short: android. Depending on which version the GS4 is running on , the web-browser acts different and incurs different issues. IE i made a phonegap app which worked fine and then DOES NOT WORK AT ALL in jellybean. needless to say I dev native now. However, use translate and 3d transforms in your elements which causes all of the elements to be redrawn with hardware acceleration and forces a redraw of the elements if they are dynamically injected in the DOM