Why three buttons are appearing in the place of Navigation backBarButtonItem in iOS 11?

Question

I have set the UINavigation bar appearance which looks like follwing,

Code:

fileprivate class func barButtonAppearance() {
    var attributes = [String : AnyObject]()
    attributes[NSFontAttributeName] = UIFont(name: .Regular, size: 14)
    attributes[NSForegroundColorAttributeName] = UIColor.descriptionColor()
    UIBarButtonItem.appearance().setTitleTextAttributes(attributes, for: UIControlState())

    let backImage =  UIImage.image(assetID: .NavigationBarBack, caps: UIEdgeInsetsMake(0, 23, 0, 0)).withRenderingMode(.alwaysTemplate)
    UIBarButtonItem.appearance().setBackButtonBackgroundImage(backImage, for: .normal, barMetrics: .default)

    UINavigationBar.appearance().backIndicatorTransitionMaskImage = backImage
}

It was working fine until we tested our application in iOS 11.

If I comment the below code

let backImage =  UIImage.image(assetID: .NavigationBarBack, caps: UIEdgeInsetsMake(0, 23, 0, 0)).withRenderingMode(.alwaysTemplate)
UIBarButtonItem.appearance().setBackButtonBackgroundImage(backImage, for: .normal, barMetrics: .default)

It works fine but with the default apple given back button.

Here is the screen shot of the navigation bar appearing,

I was not able to get what was happening. Could someone please suggest me the workaround? Thanks.

No. I tackled it differently. I added a left navigation button and have a common method in the BaseViewController to pop the ViewControllers. — Shreesha Kedlaya, Dec 13 '17 at 09:58
I found the way please check out my answer. and it will work on all ios versions. — Prabhjot Singh Gogana, Dec 14 '17 at 07:00

score 2 · Accepted Answer · answered Dec 14 '17 at 07:03

UINavigationBar.appearance().backIndicatorImage = image.withRenderingMode(.alwaysOriginal)
UINavigationBar.appearance().backIndicatorTransitionMaskImage = image.withRenderingMode(.alwaysOriginal)

if #available(iOS 11, *) {
    UIBarButtonItem.appearance().setTitleTextAttributes([NSForegroundColorAttributeName: UIColor.clear], for: .normal)
    UIBarButtonItem.appearance().setTitleTextAttributes([NSForegroundColorAttributeName: UIColor.clear], for: .highlighted)
} else {
    UIBarButtonItem.appearance().setBackButtonTitlePositionAdjustment(UIOffset(horizontal: -60, vertical: -60), for: .default)
}

image is UIImage. no need to create base controller or write code on every controller. Just put these lines in app delegate.

score 0 · Answer 2 · answered Sep 25 '17 at 11:48

You can use this method:

func addBackButton() {
    let leftButton = UIBarButtonItem(image: Asset.backIco, style: UIBarButtonItemStyle.Plain, target: self, action: #selector(self.popViewControllerAnimated(_:)))
    self.navigationItem.leftBarButtonItem = leftButton
}

Paste it in extension UIViewController

Why three buttons are appearing in the place of Navigation backBarButtonItem in iOS 11?

2 Answers2