Take the 2-minute tour ×

I have a script that lays out these circular icons on the map, you hover over them, they spring up, text appears, etc. The icons are scaled relative to their position on the map, ie, the distance from 0 on the y-axis. I've tried to set the scale through CSS's width and height attributes and through the html width & heights on the img tag and still have the same problem:

Basically, in their dormant state, such as when the page is first loaded, or the user flicks between tabs, the images (trans' PNGs) are anti-aliased. However, when the hover() function, and thus the animate() function, is invoked, the images suddenly become jagged and horrid. I've noticed that this behaviour doesn't exist in firefox but does in safari and chrome. I don't know whether this is to do with Webkit, jQuery or just javascript itself but maybe someone could shine some light as google resulted in nothing. Any thoughts? :)

Please also note that the bottom left and bottom right icons look fine in both attached screenshots- they're unscaled ones!

Icons before animation Icons after animation

Thanks a lot :) Matt

share|improve this question
So, I've discovered that the problem lies with the shadow PNG. When the opacity is animated, it's fine, but animating the width or height causes the icons to alias. I ran $('.shadow').animate({'width': '50%'}) in firebug to test and the results were the same. Headscratcher... –  Matt Fletcher Dec 7 '11 at 17:49

1 Answer 1

i can only guess on this, but my assumption is that gecko and webkit use different scaling algorithms for images. thus it has nothing to do with javascript, jquery or png at all.

in fact, the image still has antialiased edges even in the webkit screenshot. (you see that when you zoom in)

the border is just messed up which is usually the result of a bad scaling algorithm.

try the following to confirm this assumption:

<img src="youricon.png" width="90%" height="90%">

and compare the result in the two browsers. you should see the same problem.

possible solutions:

  • make a smaller version of the image and replace image with the smaller one on hover instead of scaling it.
  • use a scalable vector graphics format like SVG for your icons.
share|improve this answer
Thanks for the answer, Kaii. The anti-aliasing that appears on the screenshots is actually just a result of the screenshots themselves being scaled down. It looks far worse normally! The reason why I don't feel it is just the scaling algorithm (and I know it's fine in other situations) is that both those screenshots are from chrome; the second one is just from after animation has been invoked. –  Matt Fletcher Dec 7 '11 at 14:14
Accidentally hit enter... you can view it live here: maffoo.co.uk/misc/sectors (please ignore the 'funny' text! I was bored...) Also please ignore the shadows that magically appear and disappear, work in progress... –  Matt Fletcher Dec 7 '11 at 14:15
i'm glad i didn't ignore the text. it is quite funny and made me smile after a stressful day ;-) –  Kaii Dec 8 '11 at 0:00
my chromium build renders the page just fine btw. Version string is 15.0.874.106 (Developer-Build 107270 Linux) –  Kaii Dec 8 '11 at 0:02

Your Answer


