Subpixel animation differences on browsers
codepen.io
codepen.io
It's sad, really. We've had HTML5 sold as the holy grail where you get to write your code to The Standard and it will work the same everywhere. Except The Standard is open enough to interpretation that no two browsers implement the same thing exactly the same way. And little bugs in one browser's implementation mean you can't rely on individual features, to the point where most features have to be either crossed off your wishlist or worked around.
It was the same when the DOM and CSS changes came in around the turn of the century, and all you need do was code to The Standard and everything would work everywhere. (But then Netscape 6 came out and couldn't even render netscape.com anymore.)
The saddest part is that this same demo could have been written in Flash (a 15 year old version of it if we wanted), and it would run not only on every major browser in existence, but also faster and smoother by pretty much any benchmark you care to name.
Don't get me wrong, I still have my bet squarely on HTML5, and I really really want the browser vendors to get their shiz together. But as a front-end developer I've personally been waiting seventeen years for it. And it seems as far away today as it ever has.
Well, it very much changed in the way that these differences are much smaller that they used to be, and for far less basic stuff.
I've been in 1997 and in 1999 and in 2002. It's not like that time at all.
Chrome isnt smooth, it's jaggy. Think of sub-pixel rendering as anti-aliasing for fonts.
Do you have subpixel font rendering enabled in OSX? Are there settings?
I'll confirm there is a demonstrable difference between the two browsers, to my eye, being that in Chrome the odd numbers don't animate and in Firefox they do. However, I'd like to add that both are equally smooth and antialiased for me.
I'd also like to point out that Chrome font rendering can be smoothed/"crisped" by using in your CSS:
-webkit-font-smoothing: antialiased;
-webkit-backface-visibility: hidden;
for future reference. (Note: this CSS example does not hold any bearing on the OP's example. For whatever reason, both fonts are equally smooth for me.)Further, yes there are also settings in OSX for font smoothing. In System Preferences > General > Last checkbox is to enable/disable font smoothing.