Stacking multiple UIButtons causes image distortion

Question

All:

I am stacking multiple UIButtons on top of one another, by adding them all to a UIViewController's view. The UIButtons all have the same frame and the same .png files. If I just stack a few, they look fine: but the more I stack, the more distorted they get.

The picture below shows the issue.

The top row shows a single apple, orange and banana, with no distortion. The bottom row shows stacks of 6 apples, 60 oranges, and 120 bananas -- the distortion gets worse with the # of images.

Any idea why this is happening? Is it a rounding error in stacking the images, even though I am taking one frame and assign it to all the buttons (DraggableUIButton is a subclass of UIButton):

-(void)placeDraggableBTNs:(int)numBTNsToMake withDimensions:(CGRect)frame startingWithTag:(int)tag usingImage:(UIImage *)image{
    DraggableUIButton * btn;
    for(int j=0; j < numBTNsToMake; j++){
        btn = [[DraggableUIButton alloc]initWithFrame:frame];
        [btn setImage:image forState:UIControlStateNormal];
        btn.tag = tag;
        [self.view addSubview:btn];
    }
}

Thanks for any insights,

Michael

Answer 1

This effect is a consequence of overlaying semi-transparent pixels (i.e., ones with alphas < 1.0) atop one another.

This was pointed out in the Apple developer forums, thanks chaps!

The solution was to make the topmost button visible, and the rest invisible -- as I drag each button, it tells the one directly underneath it to show itself.