Question

In my CSS I defined a transition for a class. For some reason, when I hover over the class with the transition, the transition-duration for some reason alters the font color elsewhere (form placeholders and certain links). (This happens only in Safari as far as I can tell.)

Here’s a jsFiddle that shows what I’m talking about:

http://jsfiddle.net/EJUhd/

Does anyone know why this occurs and how I can prevent it?

Answer 1

I was struggling with a similar issue.
For me, random links throughout the page became apparently bold (clearly something to do with OSX and anti-aliasing in Safari, as Chrome (in windows 7 and OSX) as well as the same version of Safari in Windows worked fine.

The solution is not obvious, and depending on what you are doing might not be optimal, but adding this line of code fixed the issue:

-webkit-transform: translateZ(0);

This basically triggers the GPU to do animation, and the text no longer had artifacts in my site. Do note that it’s not always appropriate to use it, as it may use more battery life and use more resources. Sometimes however, it uses less, so basically check the performance when you add it.

You add this to the normal state not the :hover animated state.

img { -webkit-transform: translateZ(0); }

As opposed to on the:

img:hover { /* not here */ }

The other very positive side effect is that depending on the animation you are doing, it might be smoother through the GPU. So you won’t get the choppy animation you mention in your follow up post. In my case, the animation was more seamless in safari. I was doing a 120% scale and 5 degree rotation of an image with some box-shadow appearing at the same time. In my situation, it did not reduce CPU usage unfortunately.