CSS3, the new standard for CSS, brings about a bunch of stunning features which could be utilized to enhance and build richer user interfaces with minimal/less code. Quite a few DOM manipulations and animations which were rendered using JavaScript now can be handled via CSS3 which lead to faster execution and rendering because the browser makes perfect utilization of the limited system resources available to perform animations, effects etc. when implemented natively using CSS3 rather than relying on the browser's JavaScript engine to do so which could be expensive.
I am not going to prepare a list of the CSS3 features here but rather point to an unusual behavior that I've noticed recently. I was trying to implement the CSS3 3D flip animation. So, the basic HTML structure is as follows:
<div class="eachContainer">
<div class="eachFlipper">
<div class='front'>
<div>….</div>
</div>
<div class='back'>
<div>….</div>
<button>back</button>
</div>
</div>
</div>
The CSS code for the HTML above is as follows:
.eachContainer{
-webkit-perspective: 1000;
-moz-perspective:1000;
width:250px;
height: 400px;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
}
.eachFlipper{
position: relative;
-webkit-transform-style: preserve-3d;
-webkit-transition:all 0.8s ease-in;
-moz-transform-style: preserve-3d;
-moz-transition:all 0.8s ease-in;
}
.front, .end{
position: absolute;
width:250px;
height: 400px;
top:0px;
left:0px;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-webkit-transition: all 0.8s ease-in;
-moz-transition: all 0.8s ease-in;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
}
.front {
z-index: 2;
}
.back{
z-index: 0;
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
}
RESULT:
I noticed that upon rotating, the left side of the .back div was not accessible at all in Chrome i.e. I was not able to view values in the left side of the graph but was able to view values on the right side of the graph (as shown above). It worked well in Mozilla and I was puzzled. I googled a lot, read a lot of blogs and finally found out a stackoverflow page that contained the link to the bug at bugs.webkit.org <<BUG LINK>>.
There I found a small hack/workaround which worked for me. The .front and .back tiles seem to be coplanar with their parent and that needs to be fixed. The only small CSS change that I found was needed was:
.back{
z-index: 0;
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
}
needed to be changed to
.back{
z-index: 0;
-webkit-transform: rotateY(180deg) translateZ(1px);
-moz-transform: rotateY(180deg);
}
AFTER APPLYING HACK:
As it turns out that this is a generic issue occurring while moving coplanar objects in 3D space. Hope this helps others too !!
- SAP Managed Tags:
