Edit row action displayed on top of table view section header

Question

On iOS 11, the cell edit actions or swipe actions(available only for iOS 11) are being displayed on top of the section headers, if the table view style is set to plain (not grouped). This seems to be the default functionality and I'm wandering if this is a system bug or maybe my implementation is wrong.

I implemented a demo app, using a default table view implementation and the following functions for the headers and edit action rows:

Title for Header:

override func tableView(_ tableView: UITableView, titleForHeaderInSection section: Int) -> String? {
        return "Section \(section)"
    }

Edit actions for row:

override func tableView(_ tableView: UITableView, editActionsForRowAt indexPath: IndexPath) -> [UITableViewRowAction]? {
        let firstAction = UITableViewRowAction(style: .normal, title: "Action1", handler: {_,_ in })
        let secondAction = UITableViewRowAction(style: .destructive, title: "Action2", handler: {_,_ in })
        return [firstAction, secondAction]
    }

Trailing swipe action(the new implementation only available on iOS 11):

override func tableView(_ tableView: UITableView, trailingSwipeActionsConfigurationForRowAt indexPath: IndexPath) -> UISwipeActionsConfiguration? {
        let action1 = UIContextualAction(style: .normal, title: "Action1", handler: {_,_,_ in })
        let action2 = UIContextualAction(style: .destructive, title: "Action2", handler: {_,_,_ in })
        return UISwipeActionsConfiguration(actions: [action1, action2])
    }

Here is a screenshot of how the edit actions are being displayed:

This only happens on iOS 11. I have tried using both methods mentioned above alternatively, but I am getting the same results.

Do you have an idea of how I might be able to fix this? Is this an iOS 11 system bug?

Answer 1

For anybody that comes across this issue I found a workaround by subclassing UITableViewHeaderFooterView class and then setting the layer's zPostion to 1 which will change the header's view ordering within the window's view rendering which solved it for me.

Solution 1:

open class HeaderFooterView: UITableViewHeaderFooterView {

    public override init(reuseIdentifier: String?) {
        super.init(reuseIdentifier: reuseIdentifier)

        if #available(iOS 11.0, *) {
            self.layer.zPosition = 1;
        }
    }
}

Alternative workaround if you don't want to subclass the UITableViewHeaderFooterView class is to just override viewForHeaderInSection delegate method then set the view's zPosition before returning it.

Solution 2:

override func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
    let headerView = tableView.dequeueReusableHeaderFooterView(withIdentifier: "CustomHeader") as! CustomHeader

    headerView.title = "Header title"

    if #available(iOS 11.0, *) {
         headerView.layer.zPosition = 1;
    }

    return headerView
}