Webkit Opacity Transition Issues with Text

Question

Situation:

View the jsFiddle

Inside of a div I have an image followed by text which has a font-weight of 900 on it. In my locall

Answer 1

It's not an issue with the opacity itself (in fact, turning it back to 1 in @Zoltan's example doesn't change anything for me).

The issue is with the transitions, there are two anti-aliasing modes that webkit can use:

1. Subpixel (the default, but not supported during animations, transitions or transforms) or
2. Grayscale

This means that when an element is rendered using subpixel antialiasing and an animation is applied to it, webkit temporarily switches to grayscale for the duration of the animation and then back to subpixel once finished.

Given that subixel antialiasing results in a slightly heavier font face you get the unwanted artifact.

To solve the issue, add this to your css:

html {
    -webkit-font-smoothing: antialiased;
}

This forces grayscale antialiasing and all the text and you won't see the switching.

(end result: http://jsfiddle.net/ErVYs/9/)

Answer 2

A possible solution would be to make the opacity transition not to 1, but .999 - http://jsfiddle.net/ErVYs/2/

div {
    width: 200px;
    text-align: center;
    opacity: 0.7;
    transition: opacity ease-in 0.25s;
    -webkit-transition: opacity ease-in 0.25s;
    -moz-transition: opacity ease-in 0.25s;
    -o-transition: opacity ease-in 0.25s;
}

div:hover {
    opacity: .999;
}