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
translate3d operation on the overlying
sq1) will cause rendering to ignore the
z-index and place
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);">