Re: Transforms cause font-smoothing weirdness in Webkit

[artinruins]

I had a similar issue with a page of mine. A simple `:hover { transform: scale(1.1); }` effect was being applied to a button and the text went blurry during scaling, then snapped back to a crisper anti-alias when it stopped (in Safari and Chrome).

Before using `translate3d(0,0,0)`, in Chrome, the whole background color shifted as the transition happened as well. Very infuriating.

I added `translate3d(0,0,0)`to the hover effect, as well as `backface-visibility` and that seems to help, though now, the final frame of the effect stays blurry. Better than having the text re-render on animation end, but not great.

http://dev.projectevolution.com/gunsho/item-store.php and hover on the Purchase button.

Here is the rendered CSS (from Compass) after getting rid of the duplicate vendor rules:

.purchase-button {
transition: 0.3s all ease-in-out;
transform-origin: 50% 50% 50%;
backface-visibility: hidden;
}
.purchase-button:hover, .purchase-button:focus {
transform: scale(1.1) translate3d(0,0,0);
}