WkWebView always comes up with white background?

Before loading an html resource into a WkWebView, it is always white regardless of whether in dark or light mode. I've tried setiing its background color after instantation, but it has no effect. When in dark mode, this produces a flashing effect as the white background is briefly displayed. Is there an API that I'm missing for this?


Thanks in advance,

Neal

Accepted Reply

>using the latest beta?


This used to prevent white flashing on load for me, including w/wk, but you'd need to see if it survives the beta...


webView.opaque = NO;
webView.backgroundColor = [UIColor clearColor];

Replies

This! It's beyond me why we must suffer the ghost of Jony Ive and his WhiteWorld at every turn when Dark Mode is enabled. Dark Mode should be dark. The many instances where this is not the case is aggravating to say the least. It's also physically painful for those with light-sensitive eyes. Apple can and should so better.

You will need to turn off the background.


[webView setValue: @NO forKey: @"drawsBackground"];

  • This worked for me in macOS.

Add a Comment

HI John,

sorry but this causes a crash with the error message stating *** Terminating app due to uncaught exception 'NSUnknownKeyException', reason: '[<OTGWKWebView 0x1280f9c00> setValue:forUndefinedKey:]: this class is not key value coding-compliant for the key drawsBackground.'.


Perhaps you were thinking of UIWebView?

Who's Josh?


The code works fine here:


  WKWebView * webView =
    [[WKWebView alloc]
      initWithFrame: bounds configuration: configuration]; 
  //[webView setValue: @YES forKey: @"drawsTransparentBackground"];
  NSLog(@"Set drawsBackground");
  [webView setValue: @NO forKey: @"drawsBackground"];
  NSLog(@"Set drawsBackground success!");


And the result is:


2019-08-12 10:44:05.765156-0400 ESWebView[15736:466390] Set drawsBackground

2019-08-12 10:44:05.765216-0400 ESWebView[15736:466390] Set drawsBackground success!

Hi John,

are you using the latest beta? I ask because I still get a crash with this message: *** Terminating app due to uncaught exception 'NSUnknownKeyException', reason: '[<WKWebView 0x102175800> setValue:forUndefinedKey:]: this class is not key value coding-compliant for the key drawsBackground.'


How are you not getting that exception? I never make it to line 4.

    WKWebView *aWebView = [[WKWebView alloc]initWithFrame:self.view.frame
                                            configuration:configuration];
    [aWebView setValue: @NO forKey: @"drawsBackground"];
    self.webView = aWebView;



Thank you

Found a suboptimal solution to this issue, so until a public API solution is provided this'll have to do. Upon initialization of the WkWebView, set the webview's hidden property to true and then in webView:didFinishNavigation, use performSelector with a delay to make it visible again by setting hidden to false:

[self.webView performSelector:@selector(setHidden:) withObject:@NO afterDelay:0.75f];

Doing this in the delegate method does not fix the issue:

     self.webview.hidden = NO;

I'd rather not have to place a 0.75 second delay, so if someone has a correct public API solution please provide it.

Thank you

>using the latest beta?


This used to prevent white flashing on load for me, including w/wk, but you'd need to see if it survives the beta...


webView.opaque = NO;
webView.backgroundColor = [UIColor clearColor];

I'm very sorry, but I didn't notice this was the iOS forum. I've been doing some extensive hacking on WKWebView. That's what attracted my interest. But I've only done this on macOS so far. I will need to port all of this over to iOS. I don't like the flash either, so I went ahead and found a fix.


There are a couple of issues, at least with my demo project. There is a white flash when the app first loads, but that is from the launch screen. I built a simple app that has a button to display the web view. That way, I can tell where the flash starts and ends.


After constructing the view, but before loading it, you have to do two things:


1) Set webView.opaque = NO

This will prevent the web view from clearing the display.

2) Set webView.backgroundColor to the eventual colour of your HTML, or something halfway decent other than white or black.


You have to do both. If you don't set the background colour, you still get a flash, just a black one this time. If you don't set opaque to NO, you get a white flash regardless of the background color.


Trying to set the background colour to clearColor doesn't work at all.


There is a bit of a disconnect with the notch. If you know your eventual HTML background, you can set that as the webview background and everything looks nice. If your HTML has a different background, it gets messy.


I did not check this on the beta, but I'm pretty confident it will work. There is no way to avoid the flash, because the phone needs to do that to draw the notch. All you can do is pick the flash colour to avoid annoying the user. I see why this has been so difficult for people to figure out. The "opaque" setting really has nothing whatsoever to do with opacity. This is simply a "clear background with white" toggle. If you turn it off, you turn off the "clean background with white" operation. It will still clear the background, but with the background colour this time, which is black by default, unless you change it.

Hi John,


Noted that you were working with WkWebView on macOS. We are just trying to get it working on macOS. So easy on iOS, Mac, not so much. We are simply trying to show some of our HTML documention files. We are porting from iOS to macOS and there really isn't much here or Stack on macOS so any help would be appreciated.


Here are two code samples that result in White Screen, no errors or other messages. It is finding the files in the bundle.


Thanks for any help, suggestions or solutions.


@IBOutlet weak var webOutlet: WKWebView!

override func viewDidLoad() {

print ("WebHelp")

super.viewDidLoad()

let webView = WKWebView()

let htmlPath = Bundle.main.path(forResource: "Admin", ofType: "html")

let folderPath = Bundle.main.bundlePath

let baseUrl = URL(fileURLWithPath: folderPath, isDirectory: true)

do {

let htmlString = try NSString(contentsOfFile: htmlPath!, encoding: String.Encoding.utf8.rawValue)

webView.loadHTMLString(htmlString as String, baseURL: baseUrl)

} catch {

// catch error

}

webView.navigationDelegate = self

webOutlet = webView

}

}


OR


@property (weak) IBOutlet WKWebView *webView;


NSURLRequest *urlRequest = [NSURLRequest requestWithURL:[NSURL fileURLWithPath:[[NSBundle mainBundle] pathForResource:@"Admin" ofType:@"html"]]];

[webView loadRequest:urlRequest];

[webView.navigationDelegate self];

>there really isn't much here or Stack on macOS so any help would be appreciated.


Most likely due to the OP working with a beta OS. If that's also your case, legacy threads on the topic are best taken lightly/avoided.

It would be better to start your own question instead of piggy-backing onto this one.


I will tell you a few things, but any followup should be in your own thread.


Are you getting any output at all? You said "White Screen" but is that the same as the "White Flash"? Maybe try my incorrect (for iOS) answer above. After this exercise, I am going to try to get rid of that code in favour of something that will also work on iOS.


Primarily, I don't see where you've added the webview to a parent view. Web views don't work from interface builder, at least not without significant help.


You aren't setting the navigation delegate until after loading the HTML. Usually, the loading will take so long that it will actually happen after setting the delgate, but that is not something under your control. It is better to have everything configured before kicking off the load.


Do you really need a webview for this? Couldn't you just open the help URL in the user's default web browser?

John,


Thanks for your response.


Webview works easily with interface builder, just a single line of code assigning the view to the webview, in iOS or macOS.


Our app features context sensitive help so that the appropriate HTML displays in the view the user is in. There are over 80 HTML files so asking the user to exit the app and open another window, etc. Not a soultion. (It works great in our iOS apps.)


The issue and solution is a Entitlement called: com.apple.security.network.client, that must be set to YES. Why this is needed to access files in the app bundle is a mystery...


Sorry I posted this on the wrong thread, doesn't seem like there's much Mac expertise out there!

This should be marked as the correct answer.


Thanks for this, Sir... You saved my evening !

I was having the same issue with all webview components coming back as a white screen. My solution was replacing my zeroSSL certificate with a trusted LetsEncrypt certificate on my webserver itself... For me the problem was that the cert was not trusted by the root authority.