Webkit Opacity Transition Issues with Text

Webkit Opacity Transition Issues with Text

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/)

css opacity transition affecting text

Well, this happens because of this line:

ul li a:hover {
    opacity:0;
}

Animation of opacity causes blurry text on other divs

i've solved the issue and it was because my wrapper component had position: relative; which somehow caused the rest to be blurry when the transform was applied.

Look for a parent that has the position:relative;

---

Related Topics