0

I've creating html5 & css3 web application now and on.
I'm using Google Chrome for testing platform. and using css transform3d properties to implementation 3d camera & 3d world in web browser.
not WebGL. (because WebGL can't render HTML Elements directly.)

if it has many divisions(div elements) to draw, chrome can't draw all.
background images & some divisions are lost.
so it turns into white screen.

how can i solve this problem?

I think it is chrome's hardware acceleration bug.
How can i pass through?

Furqan Safdar
  • 16,260
  • 13
  • 59
  • 93
Heejin
  • 83
  • 1
  • 1
  • 4

1 Answers1

1

Background images do cause issues and flickering when using 3d transform.

Move the image background in one container on which you don't want to apply 3d transforms and then try. Also make sure you have -webkit-backface-visibility: hidden;

Refer this link for more info: Prevent flicker on webkit-transition of webkit-transform

Community
  • 1
  • 1
TCM
  • 16,780
  • 43
  • 156
  • 254
  • thank you for the answer. i'll try. however 3d transform cause white bug not on division that 3d transform applied but on all divisions in a page. – Heejin Oct 11 '12 at 00:31
  • Unfortunately, it seems the CSS3 3D is not mature yet.There are serious memory problems when using 3D operations with large surfaces. It may cause some browsers to crash (e.g., iPad) and others to statter (e.g., Chrome). We had a 3D maze which caused various crashes and performance problems until we got rid of its "floor". I suggest you check how you can get rid of some large surfaces, or switch to a more mature 3D technology, such as Unity or Web-GL. – Arie Livshin Oct 15 '12 at 16:08