webkit-transform overwrites z-index ordering in Chrome 13

Question

Update Sorry for failing to add the minor detail that we also layer a lot of `div` elements on top of each other with `z-index`. After working more with this problem, it seems that the `webkit-transform` actually messes with the `z-index` ordering, and that the actual problem is not related to the animations themselves. End update I am currently in a project where we develop an application which is quite heavy on CSS3 animations. We're animating a lot of `div` elements around with `-webkit-transform` and `-webkit-transition`. All is well, until today where all of the to-be-animated elements of the page disappeared. It seems that Google Chrome has updated from 12.xx to 13.0.782.107m and now, all of a sudden, CSS3 properties with `-webkit` prefixes has stopped working, and elements which have this property applied to them just doesn't show anymore. Removing the `-webkit-transform` property through the Chrome debugger makes the elements visible again. Has anyone else experienced the same…

Accepted Answer

Solved it myself through trial and error. Thought I'd report back if someone else stumbles upon this problem. It shall still be noted that this problem did not occur before Chrome updated itself to Chrome 13 (13.0.782.107m). The trick here seems to be to add a `translate3d` operation to the underlying `

` (`sq2`) element upon declaration (or atleast before animating `sq1`). Otherwise, the `translate3d` operation on the overlying `

` (`sq1`) will cause rendering to ignore the `z-index` and place `sq1` below `sq2`. I'm guessing that this is because `sq1` is defined before `sq2` in the DOM, therefore `sq2` will be rendered above it. So, the solution seems to be to put `translate3d` in the definition of the `

`:s (add it to both just to be clear): ``` HTML:

```

webkit-transform overwrites z-index ordering in Chrome 13

Solution

Problem