0

I've developed HTML5 game with canvas and DOM elements. And I have problem with flickering DOM elements while playing. The problem occurs in mobile browsers, especially in Chrome.

My apps consists of full screen canvas and DOM elements as GUI (ie. popups). There is many objects rendered on canvas in loop. While playing suddenly DOM elements start flickering (not integrally but regular fragments). DOM elements are positioned absolutely and scaled on window resize by CSS3 (transform:scale).

I cannot publish the code because it's commercial project, but I attach screens below.

http://mywebpage.ovh.org/1.jpg
http://mywebpage.ovh.org/2.jpg
http://mywebpage.ovh.org/3.jpg

Does anyone know the reason and the solution?

Thanks in advance!

mopsled
  • 8,445
  • 1
  • 38
  • 40
piotrpawlowski
  • 767
  • 2
  • 9
  • 19

1 Answers1

1

I don't think you posted any screenshots, but most likely because it is redrawing it without a buffer. I would take a look at double buffering, I know when I coded flash and java games back in the day buffers really solved a lot of the flickering.

Heres a previous question which may be helpful: Does HTML5/Canvas Support Double Buffering?

edit: okay I see the screenies now, It's probably not double buffering, but CSS. I would double check your CSS for any thing like background-attachment: fixed or position: fixed, I know that sometimes gives flickering in Chrome.

Community
  • 1
  • 1
dcruwys
  • 107
  • 2
  • I have not any background-attachment or position:fixed element. There is many positioned absolutely elements. Maybe the problem is transform: scale in my CSS? – piotrpawlowski May 07 '14 at 21:36