Tab bar background is missing on iOS 7.1 after presenting and dismissing a view controller

Question

I've tried my app on iOS 7.1 and I found that the tab bar background disappears on a few occasions. I was able to track them down; it happens when:

• pushing a view controller placed inside navigation controller (that is inside tab bar controller) with hidesBottomBarWhenPushed = YES
• presenting a view controller and then dismissing it (i.e. the MFMailComposeViewController)

I've created a sample app (used the tab bar template + added button to display the view controller, and a mapView to be able to tell if the bar disappeared), and the issue is there.

Here is all the code for the sample app that I changed:

#import "FirstViewController.h"

@import MessageUI;

@interface FirstViewController () <MFMailComposeViewControllerDelegate>

@end

@implementation FirstViewController

- (IBAction)presentVCButtonPressed:(id)sender {
    if ([MFMailComposeViewController canSendMail]) {

        MFMailComposeViewController *mailer = [[MFMailComposeViewController alloc] init];
        mailer.mailComposeDelegate = self;
        [mailer setSubject:@"Feedback for Routie"];
        [mailer setToRecipients:@[@"support@routieapp.com"]];
        [self presentViewController:mailer animated:YES completion:nil];
    }
}

- (void)mailComposeController:(MFMailComposeViewController *)controller didFinishWithResult:(MFMailComposeResult)result error:(NSError *)error {
    [self dismissViewControllerAnimated:YES completion:nil];
}

@end

Here you can download the whole sample project.

Now, important thing: this seems not to affect iPhone 5, nor the simulator. The problem is on iPhone 4 and iPod Touch (last generation as of writing this post).

Does any of you have the same problem? Were you able to fix it? Thanks!

Update: I found a workaround. See my answer below.

Answer 1

Fix found!

So after some investigating (and headache), I found out that there is a simple fix. Just toggle the translucent property, like this:

tabBar.translucent = NO;
tabBar.translucent = YES;

Now as for when to do this, there are several places for each case:

1) pushing viewController with hidesBottomBarWhenPushed = YES
The bar background disappears right after the pop animation finishes, so add the fix to the viewDidAppear: method of the viewController that presented it:

- (void)viewDidAppear:(BOOL)animated {
    self.navigationController.tabBarController.tabBar.translucent = NO;
    self.navigationController.tabBarController.tabBar.translucent = YES;
    ...
}

2) Presenting a view controller and then dismissing it:
In this case, the tab bar background is already gone during the dismiss animation. You can either do it in each viewController that you present separately, or, if you have subclassed UITabBarController (like I have), you can add it into its viewWillAppear method. Just be aware that calling the fix right away won't help (I've tried); that's why I used the dispatch_after GCD function:

- (void)viewWillAppear:(BOOL)animated {
    dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.2 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
        self.tabBar.translucent = NO;
        self.tabBar.translucent = YES;
    });
    ...
}

I know this is not the cleanest way, but it's clearly bug on Apple's side, and it's likely to stay with us for a while (I assume there won't be any iOS 7.2, so we'll most likely be stuck with this until iOS 8 comes out).

Answer 2

It's been a while, so I'll re-iterate the issue. iOS 7 (on Device) Tab Bar becomes completely see-through on device, but works fine on Simulator. Appears to happen after hitting Back from a detail page that has hidesBottomBarWhenPushed enabled.

Setting the Tab Bar Controller > Tab Bar > Background to White Color in the Storyboard fixed it for me. This fix keeps the translucency intact.

For some reason, toggling tabBar.translucent off and on again in ViewDidAppear did not work for me.

Using Xcode 6.3.1 with Swift.

Answer 3

Go in your Main.storyboard and select your MKMapView to highlighted it (cf. in Navigator area you can select « Map View »). Then look carefully where is the bottom "white square": move it up the bottom bar! In the size inspector, you can check where you place the « anchor » or view origin for this view (cf. top-left hand side in your project). This explains why it’s ok for iphone 5 which has a bigger height screen.