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 <div>
(sq2
) element upon declaration (or atleast before animating sq1
).
Otherwise, the translate3d
operation on the overlying <div>
(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 <div>
:s (add it to both just to be clear):
HTML:
<div id="sq1" style="z-index:10; -webkit-transform: translate3d(0px, 0px, 0px);">
<div id="sq2" style="z-index:5; -webkit-transform: translate3d(0px, 0px, 0px);">