SFSafariViewController shows incorrectly when pushed in UINavigationController with modalPresentationStyle = .FormSheet

Question

I have a simple Settings table view that is the first view of a UINavigationController.

I present the Settings UINavigationController with the .FormSheet modalPresentationStyle, which means on an iPhone it takes up the full screen, while on an iPad, it displays centered modally.

Now I want want one of the rows in the Settings table to push a SFSafariViewController onto the navigation stack.

This works fine on an iPhone, but on the iPad it does not. iPad screenshot:

Note that the part of the SFSafariViewController navigation bar shows underneath the navigation bar (with the Settings back button). See red rectangle in image.

let urlText = "http://www.apple.com"       
let url = NSURL(string: urlText)!     
let safariViewController = SFSafariViewController(URL: url)
self.navigationController?.pushViewController(safariViewController, animated: true)

On the iPhone, you don't see the SFSafariViewController navigation bar at all - which is perfect for my use case.

Any magic setting to make this work correctly?

Answer 1

SFSafariViewController is available to iOS9.0 or above version of apple os. According to your problem you have facing some problem show some gap in you navigation bar with SFSafariViewController view.because

SFSafariViewController is embed own navigation bar, UISearchbar, UIBarButton.when you push SFSafariViewController from over ViewController then you app navigation bar show over the SFSafariViewController navigation bar.

Answer 2

This isn't exactly a fix but here's what I ended up doing in this situation. Instead of pushing it on the navigation controller I'm doing the following

let sfController = SFSafariViewController(URL: NSURL(string:"url")!)
sfController.modalPresentationStyle = .FormSheet
sfController.modalTransitionStyle = .CrossDissolve
presentViewController(sfController, animated: false, completion: nil)

I had to turn off animation as it tried to bring in the view controller from the right otherwise. CrossDissolve takes care of the outbound animation. This might not be what you want though as in your case you're wanting to obscure the url and keep your navbar where as this way covers your navbar and shows SFSafariViewController navbar. Really SFSafariViewController isn't supposed to be used that way though so your work around of using WKWebView makes more sense in your case.

One other note, using pushViewController will actually dismiss the entire navigation controller when you hit the done button in SFSafariViewController so in most cases presentViewController is going to be the better way to display unless that's the type of behavior you want.

Answer 3

I have come to realize that it is not possible to push the SFSafariViewController onto a pre-existing UINavigationController. It comes with its own navigation bar and its toolbar.

While it does work somewhat okay on the iPhone (at least on iOS 10+) when pushed into an existing navigation controller, it has problems on iPad, so be careful if you're doing this on a Universal app.

Specifically, on an iPad, there is no toolbar in the SFSafariViewController, instead the open in safari button is shown directly in the navigation bar itself, on the top right. Since SFSafariViewController does not own or use the navigation controller that you're pushing it into, no open in safari button is shown and this will inconvenience your users.