Search code examples
javascriptjqueryimageanimationantialiasing

Image anti-aliasing after animation

I've developed a simple click game where you click an image and it gets replaced by another image. The first image is faded out and the next image is faded in using jQuery/animate/toggle.

After each animation the anti-aliasing on all images is lost for a second. It then reapplies anti-aliasing to all images.

Is it possible to force anti-aliasing constantly or force it to refresh faster so there's no time where images are not anti-aliased?

Solution

  • For me, in an embedded WebKit on Mac OS X, using this (non-standard) CSS works to preserve the antialiasing of images during CSS animations:

    img {
   image-rendering: optimizeQuality;
}

    This may not work for other browsers, of course. The mozilla.org site claims that this behave as an alias of 'auto' but it definitely changes the behaviour in WebKit.