iOS7 UIButton image flashes

Question

I'm working on a custom number pad and am having an issue with the background image of the UIButtons. Everything appears to work as it should but occasionally during push animations the buttons flicker white in between each other. This most often happens when popping a view controller to a view with the numberpad. When I change the background color of their enclosing view to something radical like green then the flicker is green, so it seems like somehow the background is showing through. This is even more pronounced and reproducible every time with a double click on the home button. Please see the screenshots for a reference of what things look like when I do it. The buttons are set up as follows:

_oneButton = [UIButton buttonWithType:UIButtonTypeCustom];
//rinse and repeat for the rest of the buttons
_nineButton = [UIButton buttonWithType:UIButtonTypeCustom];
_clearButton = [UIButton buttonWithType:UIButtonTypeCustom];

NSArray *allButtons = @[_zeroButton, _oneButton, _twoButton, _threeButton, _fourButton,_fiveButton,_sixButton,_sevenButton,_eightButton,_nineButton, _deleteButton, _clearButton];
[allButtons enumerateObjectsUsingBlock:^(UIButton *button, NSUInteger idx, BOOL *stop) {
    button.tag = idx;
    [button setTitle:@(idx).stringValue forState:UIControlStateNormal];
    [button setBackgroundImage:[[UIImage imageNamed:@"btn-numpad-resizeable.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(1, 1, 1, 1)] forState:UIControlStateNormal];
    [button addTarget:self action:@selector(buttonPressed:) forControlEvents:UIControlEventTouchUpInside];
    [self addSubview:button];
}];

For layout I use autolayout, here is an example snippet of laying out the first row, the rest of the constraints follow a similar format.

[self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[_oneButton][_twoButton(==_oneButton)][_threeButton(==_oneButton)]|" options:0
                                                             metrics:nil
                                                               views:NSDictionaryOfVariableBindings(_oneButton,_twoButton,_threeButton)]];

Here is the final result when run:

And the following are images of what happens when I do a double tap on the homescreen. One is double tap straight from the app and the other is a double tap when not in the app. It's interesting that both yield a different result. These results have been constant so far every time I try it. So imagine a push animation with the whole number pad switching between all three states of the screenshots and that's pretty much what we are seeing.

Things I've thought of / tried in order of relevancy:

• Some sort of problem with the image like transparency? There is no transparency in the images and multiple sizes or difference images all-together all cause the same issue. The resizable image doesn't affect things either. There is one caveat and that is solid images created in code or provided as a png don't cause a problem.

• Layout problem? I don't think so. I've written this with both autolayout and overriding layoutSubviews and it's the same. I've checked the frames after the view appears and all the views are stacked next to each other as they should be.

• Retina vs non retina problem? I don't have a not retina device and can't test this. Xcode 5.1 only gives me a iOS6 non retina simulator and I haven't been able to reproduce on iOS6.

• Setting the background color to match the orange of the buttons. Didn't work, things still flashed.

• Implement a custom iOS7 screenshot for when the app is backgrounded. This wouldn't solve the issues when doing pushes from our nav controller.

I'm at a loss of what's going wrong or how to fix this issue. It's possible that there is a known bug but I haven't seen anything yet. Does anyone have any suggestions?

Answer 1

if you are working with .xib file

here is container option in XCODE 5 for IOS7 .xib file for design purpose.

Go to show the size inspector option. Go to Arrange check is there any container view set for your UIButton views. horizontally or vertically. please remove if any. may your problem will be solve.

Thanks

Answer 2

I eventually found a solution that works for the most part - I still get the strange images when I double tap the home button but I think thats a flaw in iOS because I notice similar artifacts in every app. Anyways what ended up working for me was to ditch using images for the buttons and instead I drew them with core graphics. Once it was all said and done it was a lot simpler and cleaner and I didn't have 20+ images to support all the button states on different devices. As to why I had the problem in the first place I'm still not sure, but I think it may have had something to do with the resizable images we were using to create the buttons.