I realised that on my 13" MacBook Pro (mid 2012), Google Chrome renders fonts with opacity in a different way than other browsers.
This is what it looks like in Chrome:

Notice that the second heading is much thinner that the first one. This is the same code in Firefox.

In Firefox it's correct.
This looks very weird especially with fade in/out effects...
I have no idea what's wrong. When I had my old 15" MacBook Pro (late 2008) it was correct in all browser, so maybe it has something to do with rendering using GPU?
By the way, this is the test code http://jsfiddle.net/Ar23s/.