Why does a PNG image sometimes get blurry depending on its position in a view

Question

Hi,

I have noticed that when placing PNG images into a view using IB and/or animating those images to various positions around a view, the image can sometimes get a slight blur.

In most cases I can remedy the blur by adding .5 of a pixel to the images position.

[lbLiteButton.layer setPosition:CGPointMake(140.5,159.5)];

Sometimes I have to adjust both x and y like above. Sometimes I only have to adjust x or y.

I remember reading somewhere that this has to do with the size of the image and how core animation works and something to do with half pixels... but I cant find the article anywhere!?

The problem with the ".5 pixel" solution is that its different for every PNG image depending on size, so you can't reuse custom animation because you have to customise it for each different image.

1. Is there a way to ensure that no matter where I place or animate my image, I won't get any blurred positions?
2. Does anyone have any information on this?

Thank You!

Answer 1

I had a similar experience with blurred text in a label, and it was caused by the superview of my labels having a subpixel offset. So even though the location within that view was integral, when adjusted to its parent's coordinates it had a half pixel or so offset, causing the blur.

If you're getting this only sometimes, though, that might not be the case. Is your superview moving around, or positioned strangely? I'd say the best thing to do is to figure out the precise circumstances under which this is happening.

Answer 2

The position property of a view's layer is based on its anchorPoint property. By default, that is (0.5, 0.5), meaning that the anchor point of the layer is at its center. If your view (and its layer) are an odd number of pixels wide or high, setting an integral value for the position will cause the view's origin to be non-integral, leading to the blurriness you see.

To work around this, you could figure out an integral version of your position by taking the desired center position of the view, subtracting half of the view's width, rounding that value, then adding half of the view's width, and repeating for the height. You could also set the anchorPoint for your view's layer to (0,0) and position the view based on its origin.

There's a chance that this might also be related to a misalignment of a superview. To diagnose this, you could use the Core Animation instrument in Instruments, and select the Color Misaligned Images option. It should color any views or layers that are non-pixel-aligned in your application.

Answer 3

IB has a bug where sometimes (not often) just moving elements around will render them fuzzy - you see it most often with UILabels and UIImageViews (although that's probably just what is most apparent). I'm sure it has to do with the points mentioned above in some way, but the fix is often to set the location (x,y) coordinates for the element to 0,0, and then back to the original values. This usually resolves the issue (again, this is in IB).