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 16 it only works at random.

More specifically it seems the -webkit-perspective doesn't take which makes everything flat (although the elements still get transformed). Changing the perspective in Chrome's "firebug" after the page has loaded doesn't affect anything either.

The page in question is here: http://exscale.se/__files/uploads/jquery-3d-circle.htm. I know there's quite a lot of code but the stuff related to the 3D transforms are all in this CSS file: http://code.google.com/p/sleekphp/source/browse/trunk/Sites/SleekBase/Modules/Base/CSS/jQuery.threeDCircle.scss

My question is: do you experience the same problem with my page or have you ever experienced this yourself? And if so, can you think of anything that triggers it?

I should mention I'm using Ubuntu 10.10 and Chrome 16.0.912.63.

Answer 1

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 2

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 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);