Sorry for failing to add the minor detail that we also layer a lot of
div elements on top of each other with
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.
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
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 issues, or know how to solve this problem?
I might add that I've tried to remove just the
-webkit prefixes (leaving just
transform), which then shows the missing elements, but then that won't animate the elements at all, as the CSS3 property
transform is not supported.
I have also tried using
el.style.WebkitTransform, with no success.
Will pass some example code to explain. The desired result of this is to move
sq1 away and reveal
HTML: <div id="sq1" style="z-index:10;"> <div id="sq2" style="z-index:5;"> JS /* fetch the element */ var el = document.getElementById("sq1"); /* apply CSS */ el.style["-webkit-transition"] = "-webkit-transform 500ms linear"; el.style["-webkit-transform"] = "translate3d(30px, 30px, 0px)";
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);">
This should only affect any elements which are positioned as absolute or relative. In order to remedy the issue, you can apply the following css statement to every element which is positioned this way and is causing issues:
This will apply the transform to the element without actually doing a transformation, but affecting it's render order so it is above the element causing the issue.
I think you need to try using
webkitTransform instead of
el.style.WebkitTransform (uppercase W).
el.style["-webkit-transition"] = "-webkit-transform 500ms linear"; el.style["webkit-transform"] = "translate3d(30px, 30px, 0px)";
Your missing the - on the second line, this could be the problem.
©2020 All rights reserved.