Css Animation not working in Google Chrome Flipclock - css

Question

my flipclock animation works well in Firefox & IE but doesn't work in Google Chrome.
HTML
<div id="tempFlipClock" data-position="LeftContent">
<div id="FlipClockContainer" class="animated" data-dbitm='ClockContainer'>
<div class="container">
<ul class="flip hoursPlay">
<li>
<a>
<div class="up">
<div class="shadow"></div>
<div class="inn"></div>
</div>
<div class="down">
<div class="shadow"></div>
<div class="inn"></div>
</div>
</a>
</li>
<li>
<a>
<div class="up">
<div class="shadow"></div>
<div class="inn"></div>
</div>
<div class="down">
<div class="shadow"></div>
<div class="inn"></div>
</div>
</a>
</li>
</ul>
<ul class="flip minutesPlay">
<li>
<a>
<div class="up">
<div class="shadow"></div>
<div class="inn"></div>
</div>
<div class="down">
<div class="shadow"></div>
<div class="inn"></div>
</div>
</a>
</li>
<li>
<a>
<div class="up">
<div class="shadow"></div>
<div class="inn"></div>
</div>
<div class="down">
<div class="shadow"></div>
<div class="inn"></div>
</div>
</a>
</li>
</ul>
<ul class="flip smallsize dnPlay">
<li>
<a>
<div class="up">
<div class="shadow"></div>
<div class="inn"></div>
</div>
<div class="down">
<div class="shadow"></div>
<div class="inn"></div>
</div>
</a>
</li>
<li>
<a>
<div class="up">
<div class="shadow"></div>
<div class="inn"></div>
</div>
<div class="down">
<div class="shadow"></div>
<div class="inn"></div>
</div>
</a>
</li>
</ul>
<div class="clsServerDate">
<span id="serverdate"></span>
</div>
</div>
</div>
</div>
i put the fork here ... [PS]:http://codepen.io/anon/pen/WQxREV
it work on firefox but not chrome... in chrome only display white page.. this happend after the chrome update that disable flash..

Answer 1

It seems like your perspective is the main culprit here. I've made changes in your CSS as:
old CSS:
ul.flip li a {
height: 100%;
-webkit-perspective: 200px;
-moz-perspective: 200px;
perspective: 200px;
}
new CSS:
ul.flip li a {
height: 100%;
width: 100%;
display: inline-block;
/* -webkit-perspective: 200px;
-moz-perspective: 200px;
perspective: 200px; */
}
As you can see I've comment-out your perspective for ul.flip li a now its working fine for both Chrome as well as FF.
Hope it will do the trick for you :)