CSS Flip-Counter Revisited

June 20th, 2013 / Code

It didn't take long for my CSS counter experiment to stop working completely. Since I didn't build it from scratch I didn't really care enough to try and fix it. Over a year later, it was time for a reboot.

Demo

The demo works in Chrome, Firefox, and Safari (thanks Big John). Big problems still in IE10.

Whack-a-mole with browser issues

The downside of not having images as your digits means you are at the mercy of the different ways browsers render text and handle transforms. Working fine in Chrome on Mac, alignment issues on Chrome for Windows. Fix an issue for Chrome, break something in Firefox. Unfortunately, this type of counter will never be pixel-perfect on every browser.

IE10 has problems with backface-visibility, and I haven't had time to work out a fix.