iPhone Safari strange css bug (z-index in animation)

[lordganymed]

On the iPhone, the numbers are temporarily displayed mirror-inverted when rotating. I suspect here a css property is not supported.

[lordganymed]

I have found the problem. In the .css file the animation of the rotating digits is defined in keyframes. There is an anination for the upper part (hide old digit) and an aniation for the lower part (show new digit). The visibility is controlled by z-index, which leads to problems with animations in Safari.

My solution is certainly not pretty, but seems to work (tested also on Android and Windows Chrome/Firefox). Instead of z-index I used opacity to control the visibility:

@keyframes countDown_flip_1{
	0%{transform:rotateX(0);opacity:100;}
	50%{transform:rotateX(-90deg);opacity:100;}
	51%{transform:rotateX(-90deg);opacity:0;}
	100%{transform:rotateX(-180deg);opacity:0;}
}
@keyframes countDown_flip_2{
	0%{transform:rotateX(0);opacity:0;}
	50%{transform:rotateX(-90deg);opacity:0;}
	51%{transform:rotateX(-90deg);opacity:100;}
	100%{transform:rotateX(-180deg);opacity:100;}
}