Webkit opacity transition issues with text
===

[Le Fiddle (in Comic Sans, just for you!)][1]

**THE SITUATION**

Inside of a `div` I have an image followed by text which has a `font-weight` of 900 on it.  In my locally hosted environment I'm using a custom font, but for the fiddle above I chose the "ever-so-stylish" Comic Sans to illustrate my point.  Before anything happens I set the opacity of the entire div to 0.7.  However, on hovering over the `div`, I want the opacity of everything to come to full opacity.

**THE PROBLEM**

I've noticed that in Webkit browsers only (more apparent on Chrome than it is on Safari however), upon hovering on and off the of the `div` tag, the text's weight will appear to change.  In actuality, there's no change at all of course in the weight of the text.  However, upon closer review you'll see the text appears at it's desired weight only on hover, but not in a non-hovered state.

**THE THINGS I'VE ALREADY TRIED**

 - I've tested this in all the latest versions of Chrome, Firefox, and Safari.
 - I am testing this currently on the new MacBook Pro which, in my case, is a retina screen. However, the colleague next to me tested the fiddle on her iMac (non-retina display) only to find the issue still apparent.
 - Perhaps I'm just crazy, but I feel this actually may be how webkit browsers choose to render out elements with different opacities. Then again, that may be just me trying to avoid admitting I did something wrong.  :)

If the fiddle doesn't prove sufficient evidence, here's some screen grabs for you:

![Screen grab!][2]


  [1]: http://jsfiddle.net/ErVYs/1/
  [2]: http://i.stack.imgur.com/z3rKZ.jpg