缺少CSS3支持时，如何轻松翻转CSS卡翻转效果？

Question

I'm using the library FlipClock.js to build an analog-style clock that uses a version of the CSS "card flip effect." Unfortunately, only after building out my project did I notice a long-standing bug affecting Internet Explorer 9 and below:

https://github.com/objectivehtml/FlipClock/issues/7

In IE9 and below, the clock time lags by one second (ie, in the first second of animation, nothing visible changes), and the digits in the clock are also offset by a value of 1. My expectation is not for the CSS flip animation to work, but for the digits to change instantly as they currently do, only be correct.

I've been troubleshooting for a while but have yet to find a solution or even pinpoint the problem. I have a hunch that this isn't a script-related bug; I suspect that the digits are changing correctly in the HTML (hard to verify with IE's developer tools), but that they're just not showing as intended due to one or more CSS rules that were written not considering IE9's poor CSS3 support. I'm kind of expecting (or at least hoping) to stumble upon a CSS property or two that just fixes it.

The library is based on a proof-of-concept, which exhibits the same problem:

http://codepen.io/ademilter/pen/czIGo

I'm troubleshooting there to keep it simple, and if I find a fix, will submit a pull request to the FlipClock.js library.

I would greatly appreciate any help!

Answer 1

After removing the CSS animations and shadows, changing the z-index of li.before might do the trick (see http://codepen.io/cbuckley/pen/rysja ):

body.play ul li.before {
    z-index: 1;  /* was previously 3 */
}

So you could use z-index: 1 by default, then feature-detect for CSS animations in the JavaScript and add a body class (say body.supports-animation ). Then the relevant CSS might look like:

body.play ul li.before {
    z-index: 1;
}

body.play.supports-animation ul li.before {
    z-index: 3;
}

/* Prefix animation/background declarations with body.supports-animation too */

Caveat: I haven't tried this with FlipClock, nor have I actually tested on a browser without animation support, but I hope it gives one possible option :-)

Answer 2

Just changing the z-index will fix the problem for IE8 and IE9 but will break the transition for all modern browsers.

To Target specifically I8 or IE9 you can use this: On your JS file add:

var doc = document.documentElement;
doc.setAttribute('data-useragent', navigator.userAgent);

then on your css you can detect IE8 and IE9 with this code (flipclock.css line 160):

/* PLAY */
.flip-clock-wrapper ul.play li.flip-clock-before {
    z-index: 3;/*Original */
}
/*ie8 and ie9 fixes*/
html[data-useragent*='MSIE 8.0'] .flip-clock-wrapper ul.play li.flip-clock-before {
    z-index: 1;
}

html[data-useragent*='MSIE 9.0'] .flip-clock-wrapper ul.play li.flip-clock-before {
    z-index: 1;
}

That fixed the problem for me!