UINavigationBar appearance background image duplicated and blurred in iOS 7.1

Question

I have an interesting issue with an existing project and iOS7.1, I think. I've had code working and performing normally; since updating XCode and my iOS on my devices I have a problem, a transparent background image used in the Navigation Bar for that project is now rendered twice, once at the correct size and again blown up and blurry. The code only adds the image via the [UINavigationBar appearance] api in the app delegate. To check that this wasn't a specific bug with my code I create a default xcode project using the master detail default, set it to be iPhone only, added some newly created images and set them using the same calls in the app delegate. This project had the same issue and is on github here:

UINavigationBarBug github source

This is the relevant chunk of code imo:

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    // Override point for customization after application launch.
    [[UINavigationBar appearance] setBackgroundImage:[UIImage imageNamed:@"TLS.png"]
                                       forBarMetrics:UIBarMetricsDefault];
    [[UINavigationBar appearance] setBarTintColor:RGB(233, 155, 20)];
    [[UINavigationBar appearance] setTintColor:RGB(245, 245, 245)];

    return YES;
}

A screenshot of the problem:

Looking at the transition documentation what i am doing here should be fine, the navigation bars at 44 points high should be scaled horizontally and not vertically. I'm also pretty sure this problem never occurred prior to the update (it would have been spotted by internal QA prior to uploading the code to apple for review).

Two things fix it:

1) Using non transparent images, if it still has the problem it is loading the 'correct' image second and due to the lack of transparency overriding the incorrectly rendered one.

2) Using a navigation bar that is 66 points high instead (available in the project with a top transparent section as TLS-ios7), changing the code in the app delegate to use that fixes the problem.

Can anyone enlighten me as to what is going on here? Is this a bug, is it my fault, is there some section of documentation that informs me why this is so?

Thanks!

** Update: I recently found an iPad lying around still running iOS 7.0, this problem does not occur. **

Answer 1

I just received this following my bug report... tl;dr It's me providing an image with an incorrect height:

Workaround for iOS 7.1 is to specify a resizable image with a non-zero inset. Internally UINavigationBar will tile your image if it isn't quite the right size and that is basically what was happening here – since the image wasn't tall enough (the navigation bar is top attached, so the image needed to be 64pt tall not 44pt) it would get tiled. If you set it to stretch and configure the cap insets such that it only stretches pixels that are uniform you should be able to avoid this issue.

Answer 2

I had a similar issue on my app. I solved it by setting the "translucent" of my UINavigationBar to NO.

[self.navigationController.navigationBar setTranslucent:NO];

Answer 3

You can disable image stretching by defining left and top caps. Here's a Swift 3 solution:

let navbarImage = image.stretchableImage(withLeftCapWidth: 1, topCapHeight: 1)
UINavigationBar.appearance().setBackgroundImage(navbarImage, for: .default)

Example before:

and after the fix:

Answer 4

I had a similar looking issue and it turns out I didn't have the correct image assets in the assets catalog. I only had retina assets but when I imported, they went into the 1x box in the asset catalog - moving them to the 2x box fixed my nav bar for me.

Answer 5

I had a similar problem, I had a logo with transparent background. Height was fine. Added in coloured background and the problem stopped.