White lines appear in SearchBar when using colored navigation bar

Question

I am getting multiple white lines when clicking in the SearchBar.

It is happening when using both a TabBarController and a colored bar NavigationController, but

• It works when only using a NavigationController
• It works when both TabBarController and NavigationController but with the default color

---

I setup the navigation color in the AppDelegate using this line of code:

UINavigationBar.appearance().barTintColor =  UIColor(rgb: 0x0277BD)
UINavigationBar.appearance().titleTextAttributes = [NSAttributedStringKey.foregroundColor : UIColor.white]

And I setup the UISearchController in my SearchViewController using:

let searchController = UISearchController(searchResultsController: nil)
    override func viewDidLoad() {
        super.viewDidLoad()
        // Setup the Search Controller

        searchController.searchResultsUpdater = self
        searchController.obscuresBackgroundDuringPresentation = false
        searchController.searchBar.placeholder = "Search Events"
        searchController.searchBar.tintColor = .white
        navigationItem.searchController = searchController
        definesPresentationContext = true
}

Any idea of what is happening?

Answer 1

Not sure if this is a satisfying answer but it looks like an iOS bug, that might have something to do with the translucency effect that's added by default to the top bar. The top bar consists of two parts (navigation & search) and it seems like the white line appears on the bottom edge of the navigation part during the slide-up animation. If you add navigationController?.navigationBar.isTranslucent = false to your viewDidLoad() the problem goes away.

Translucent bar

Opaque bar

Why does the white line appear only when you embed the UINavigationController in the UITabBarController? No idea :( The isTranslucent = false thing is a workaround at best, but maybe it's enough.

Answer 2

An extremely dirty workaround without giving up translucency, is to add a small 'masking' view:

let rect = CGRect(x: 0, y: navigationController.navigationBar.frame.height, width: navigationController.navigationBar.frame.width, height: 1.0)
let view = UIView(frame: rect)
view.backgroundColor = /* Your matching background color */
view.autoresizingMask = [.flexibleTopMargin]
navigationController.navigationBar.addSubview(view)

Add this to viewDidAppear as a one time action. This workaround doesn't completely hide the issue during navigation transitions. This issue is a bug which should be reported to Apple by everybody affected by this problem.