CSS 3D transforms works at random in Chrome 16

Question

I have a really strange problem where CSS 3D transforms work sometimes and sometimes not. Before upgrading to the latest version of Chrome it always worked but with version

Answer 1

Chromium blacklisted your GPU and refuse to do any 3d CSS.

the solution is pretty easy: turn on "override software rendering list" option in "chrome://flags".

see https://github.com/bartaz/impress.js/issues/40

Answer 2

Go to the Chromium web SCM interface and check that your GPU isn't blacklisted.

Also, go to chrome://gpu/ and check that Chrome reports 3D CSS as enabled.

Answer 3

Here's something that I found that may be the issue. When you use the code

-webkit-perspective: 600px;

You need to have that in the parent of the element you want it to affect. If it's in the actual element, it need to be combined with the transform, like so

-webkit-transform: perspective(600px) rotateY(45deg);