SFSafariViewController looks weird

[badgercl]

Hi,

SFSafariViewController views presented in apps using Chameleon are using part of the color scheme, and they do not look ok.

For instance, to the demo app I added an IBAction to the example button with the code:

@IBAction func openSafari(sender: AnyObject) {
     if #available(iOS 9.0, *) {
         let safariView = SFSafariViewController(URL: NSURL(string: "https://duckduckgo.com")!)
         self.presentViewController(safariView, animated: true, completion: nil)
     }
 }

When clicking the button the presented SFSafariViewController looks:

You can notice the URL bar and the done button have the background color, but the rest of the navbar and status bars have the standard grey.

Is there a way to have the SFSafariViewController fully themed or can I add an exception to leave SFSafariViewController with the default color schema?

Thanks!

[bre7]

There might be a way to theme it. I'll have a look next week or we'll need to think of a way to add exceptions (if there isn't one already) to solve this issue an #72 also.

[vicc]

This is definitely "fixable". There may be a way to exclude it from being themed, but it wouldn't be ideal. Instead, we should find a way to theme it as a regular view controller would be themed, with a few modifications so it doesn't look bad. @bre7 Let me look into this while I also look into #72.

[bre7]

Not sure if possible for the time being: http://stackoverflow.com/questions/33246813/how-to-change-the-background-color-of-a-sfsafariviewcontroller

[badgercl]

So, probably it would be nice to not apply any styles to SFSafariViewController at all :)

[bre7]

Yeah. Exceptions can't be added I think. @ViccAlexander kinda hacky but the only possible solution I thought would be to swizzle SFVC viewDidLoad and set the components' style back to default.

[vicc]

I looked into this and as @bre7 pointed out, there really isn't much that can be done until Apple fixes this themselves. Apple does however mention that if you'd like to customize the web content and controller, you're better off using WKWebView instead.

From Apple Docs:

Use the SFSafariViewController class if your app lets users view websites from anywhere on the Internet. Use the WKWebView class if your app customizes, interacts with, or controls the display of web content.

@bre7 Swizzling could work, but I don't think it's absolutely necessary when other options exist (WKWebView). Hopefully in the next iOS release, we can get this fixed. If you'd like to give it a shot, feel free to do so though, and if it works, you can reopen this issue back up. 👍

[badgercl]

Actually, you are missing something really important.

The goal of SFSafariViewController is to show external links without leaving the current application. This controller runs in a separated thread and uses all the Safari-managed credentials. For instance if you have logged at Facebook in the Safari App, when you open a FB link using SFSafariViewController from your application, instead is showing a FB-login screen, you'll see immediately the content since the SafariController uses the Safari App FB credentials.

It's true we can use UIWebView or WKWebView to show external links, but it makes the developer to create a ViewController, embed the WebView and handle the callbacks. Also the Safari-managed credentials are not available.

In addition, from iOS 9 Apple introduced App Transport Security which tries to enforce high quality security by blocking insecure connections.

That means any outgoing connections from an app, using NSURLConnection, NSURLSession or WebViews, have to meet the ATS requirements or they are going to be blocked. Since the feature we are trying to implement is an viewer for external links, we cannot control the security features of other servers. That means we'll need to create a wildcard exception for ATS making the app vulnerable to attacks. Probably Apple introduced the SFSafariViewController considering that issue.

While you can push an update on the issue, found an ugly workaround for the styling issue by setting the Chameleon Theme to Safari colors and then immediately putting the app theme back:

[Chameleon setGlobalThemeUsingPrimaryColor:[UIColor whiteColor] withContentStyle:(UIContentStyle)UIContentStyleContrast];
SFSafariViewController *safari = [[SFSafariViewController alloc] initWithURL:[NSURL URLWithString:url]];
[self.navigationController presentViewController:safari animated:YES completion:NULL];
[Chameleon setGlobalThemeUsingPrimaryColor:[UIColor mainColor] withContentStyle:(UIContentStyle)UIContentStyleContrast]

[Gargam]

Hello,

This also affect video player controls (triggered from youtube iframe in WKWebView in my case, but I think it will do the same for any other player that show up).

[ezhes]

This is the code I got to work perfectly with SFSafariViewController however I can't seem to get the buttons to be the right bluish color but it works.

Chameleon.setGlobalThemeUsingPrimaryColor(nil, withSecondaryColor: nil, andContentStyle: UIContentStyle.dark)

[jordanebelanger]

It looks like any solution might be too hackish, but ++ for a fix for this.

Using a WKWebView is definitely not a proper alternative to SFSafariViewController.