Blog

iOS – Pixel misalignment, why it's bad, how to fix it…

19 Jul, 2013

One of the common things I see going wrong is pixel alignment.

What is pixel mis-alignment, what’s causing it, and how to fix it?

Fractions when logging in Xcode. .5 values are not always a problem though.

Read on for more details.

A screen is built up of pixels. Each and every pixel is distinct and can be addressed with an exact coordinate. Before there were retina screens, every pixel consisted of an x and y integral value in the range of 320 by 480.

When Retina came around, there were actually 640 x 960 pixels available. But to keep current Apps working, Apple still addresses these pixels in the range of 320 by 480. But there were pixels available at every exact .5 increment.

When it comes to rendering, in a perfect world, every pixel you request the system to draw to the screen will line up perfectly with an actual physical point on the device’s screen. When you start doing calculations to create relative drawing positioning on-screen you can easily calculate values that do not line up nicely with a multiple of .5. And thus pixel mis-alignment will occur.

Another common reason for pixel misalignment is when the graphical assets you are using for a retina version of an image is not exactly twice the dimensions of the non-retina image. An icon which is 30×30 on non-retina and 61×60 in retina version is quite common. But, this causes pixel mis-aligment as well.

The dimensions of the retina version of this image are of by one.

How to detect pixel mis-alignment?

Instruments and Simulator will help you here. If you run your app in the Simulator you can enable an option called „Color misaligned images” it is within the Debug menu of the simulator. When you enable this option, Simulator will color the items on your screen to indicate certain things happening. A yellow tint is no problem, that is an indication of something being stretched, the iOS platform does this extensively to reduce memory usage. But when items appear magenta colored, it’s an indication of a problem. And in my opinion it’s a problem you absolutely have to fix.

Image misalignment degrades rendering performance significantly on iOS. This happens because a misaligned image needs to be interpolated with it’s surrounding pixels to determine what color values actually have to be sent to the screen buffer.

Misaligned pixels in iOS simulator

How to fix pixel misalignment?

Once you have found your culprit. It’s a good idea to start looking through your code to determine how the actual frame of the misaligned screen item is calculated. Some debugging will help you here. I’d look in any layoutSubviews or loadView calls for any divisions being performed on view frames. Also using Font metrics in your calculations is a common cause for misaligned images.

Most likely you will have found your culprit pretty soon. How to fix this? There are two ways to go about this. Either use a floorf or ceilf on the exact value causing the misalignment. Or pass the CGRect for the views frame through a CGRectIntegral call.

When it concerns an image on a retina device, make sure the retina version of that image is actually exactly twice the dimensions of the non retina image. Faulty dimensions on retina image resources is a common cause as well for pixel misalignment. So get check those image resources if they show up magenta.

 I have added a simple example which produced pixel misalignment by causing it on purpose in my sample project. Please see DemoForBlog on GitHub. The sample is in the XSDSixthViewController class.

60 frames per second. That’s my goal.

guest
11 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
harm
harm
8 years ago

this posting would have been much more instructive if some screenshots were included.

Eray
Eray
6 years ago

It is so helpful, thanks.

frank
frank
6 years ago

This article and the demo are very useful for me. When i use the demo, i find the label in second viewcontroller colored magenta although its frame rect values are all integrals during an animation. Could you please tell me the reason. Thanks in advance.

Frank
Frank
6 years ago
Reply to  frank

I find that almost all labels during an animation is colored magenta, except for that with size changing meanwhile. So I am wondering whether the magenta color during an animation is a problem and should be avoided?

Frank
Frank
6 years ago

I mean the Second View controller, which is hidden in the last tab button “more”.

Frank
Frank
6 years ago

Thanks, i got it.

Prk
Prk
6 years ago

I am not seeing the magenta color in your app, could you please help me in understanding how to debug color misaligned images.

Explore related posts