Refresh Control with Search Display Controller appears overtop the Search Bar

Question

I have implemented a simple Table View Controller with a Search Display Controller dragged out via Interface Builder. I then enabled refreshing so that a Refresh Control is visible when the user pulls down to refresh.

The problem is, the spinner is visible on top of the search bar when it should lie underneath it.

I know the cause is the Minimal Search Style. If you use the default Prominent style, the issue doesn't exist.

When you slowly pull down you'll see the first line appear overtop the search bar like so:

If you keep pulling it does show up in the location you expect, but if you push the view back up while it's still refreshing you'll see the spinner on top of the search bar like so:

As soon as you push it up so that the spinner touches the first section header, the spinner immediately disappears.

This is how it is supposed to look, like it does in Mail - underneath the search bar:

I tried to fix the problem by simply making the spinner lie underneath the search bar so that it would never appear overtop, but that did not work. Oddly enough, that code caused the spinner to not be visible in the gray area above the table and if you push it up it appears overtop the search bar - exactly opposite of what I would expect. Here is that code:

self.refreshControl.layer.zPosition = self.searchDisplayController.searchBar.layer.zPosition - 1;

How can I prevent the spinner appearing on top of the search bar when using the Minimal style?

Answer 1

To workaround this bug for UISearchBarStyleMinimal, you have to set backgroundImage property with any image. Only if background image is set, layout behave correctly.

private extension UISearchBar {
    private func setBackgroundColorWithImage(color: UIColor) {
        let rect = self.bounds
        UIGraphicsBeginImageContext(rect.size)
        let context = UIGraphicsGetCurrentContext()
        CGContextSetFillColorWithColor(context, color.CGColor)
        CGContextFillRect(context, rect);

        let image = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        self.backgroundImage = image // here!
    }
}

Answer 2

This seems to be a bug with the Minimal Bar Style. If you set it to Prominent you won't experience the issue. If you use Prominent and try to remove the background, you'll also experience this issue. The only workaround I've found is to try to mimic the Minimal style with the Prominent style applied.