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

Question

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.

Answer 1

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).

Answer 2

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 3

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.