Navigation bar for split view controller is darker when inside a tab bar controller

Question

If you place a split view controller inside a tab bar controller the navigation bar and tab bar are darker on the left side. I've attached a screenshot. I created this by creating a Master-Detail Application and then adding a tab bar controller. How do you correct this issue?

I discovered that the master view controller is not extending underneath the navigation bars and tab bars so it's picking up the background color from the split view controller instead of the master view controller which is why it's darker. — Berry Blue, Dec 14 '15 at 22:11
The View Debugger shows the master is in fact extending underneath the bars. For some reason the bars are not drawing correctly. Did you find a workaround to this problem? — Jordan H, Mar 12 '17 at 22:43
No, it's a bug. I showed it to an Apple Engineer. I logged it back when I posted but they haven't fixed it and there doesn't appear to be any kind of workaround. — Berry Blue, Mar 12 '17 at 23:30

score 4 · Answer 1 · answered May 26 '17 at 03:20

At the time of writing (May 2017) this bug still exists. I can't believe Apple doesn't take care of this. The worse part is that if you rotate your device, open the master from the side and rotate back, the translucent bars switch place and suddenly the master has a working translucent bar and the detail has not. :/

The only possible fix I was able to come up with, was to get rid of UITabBarController and instead build my own implementation of a tab bar controller using a plain UIViewController with a UITabBar at the bottom and the UIViewController containment API.

This means a lot of coding to reinvent the wheel. Its sad to not make use of UITabBarController but thats how it is. You have to make a trade off between the container controller and all its nice features like the "More" controller you get for free vs having translucent bars.

If you can live without translucent bars, I'd still go for UITabBarController over do all the coding. On the other hand, one could replace the UITabBar with a UICollectionView and have more than 6 items without having the need for a "More" controller at all.

score 1 · Answer 2 · edited May 23 '17 at 11:53

Set the navigation controller's view backgroundColor to white:

self.navigationController?.view.backgroundColor = UIColor.whiteColor()

This will preserve the light gray color.

You can also disable translucency, but then the navigation bar will be white:

self.navigationController?.navigationBar.translucent = false

The answers come from this Stack Overflow question: Dark shadow on navigation bar during segue transition after upgrading to Xcode 5.1 and iOS 7.1

Igor Camilo · Answer 3 · 2019-01-02T18:34:35.230

While other answers get rid of the gray areas, the content doesn't appear behind the bars, making them not translucent in practice. If you wish to keep the effect, I found a workaround: don't use Storyboards.

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {

    let greenVC = UIViewController()
    greenVC.view.backgroundColor = .green
    let redVC = UIViewController()
    redVC.view.backgroundColor = .red
    let splitVC = UISplitViewController()
    splitVC.viewControllers = [UINavigationController(rootViewController: greenVC), UINavigationController(rootViewController: redVC)]
    let rootTBC = UITabBarController()
    rootTBC.viewControllers = [splitVC]
    window?.rootViewController = rootTBC

    return true
}

Before, using stock Interface Builder controllers (notice the gray backdrops of master navigation bar and tab bar):

After, instantiating controllers in code (see how the backdrops get the right color of the background now):

Navigation bar for split view controller is darker when inside a tab bar controller

3 Answers3

Linked