Chris Nanney

CSS Flip-Counter Revisited

June 19, 2013
This post is over 9 years old

In the world of web development, this is ancient. What you see here may no longer be a good idea or in alignment with best practices. I've left the content mostly as-is, besides minor fixes for typos or dead links.

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). Problems still in IE10. Source on GitHub.

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.