CODEWITHSUNDEEP
cocoa-touchuikitwkwebview
chicken
chicken

Reputation: 1609

How can I give WKWebView a colored background

I'm working on an app in which I load different html files with mostly dark backgrounds. Right now there's a small white flash when navigating from one page to another, presumably since the next page has not loaded yet. I'd like to get rid of that flash and thought the most straightforward way would be to give the WebView a background color.

I tried setting the color for the WebView as well as the scrollView inside of it, but that doesn't seem to work:

self.webView?.backgroundColor = UIColor.blackColor()
self.webView?.scrollView.backgroundColor = UIColor.blackColor()

I see a flash of the color when the view is loaded the first time, but not on subsequent navigation.

Upvotes: 43

Views: 28559

Answers (5)

cherucole
cherucole

Reputation: 678

What worked for me in macOS 14

let webview = WKWebView()
webview.setValue(false, forKey: "drawsBackground")

Upvotes: 4

Tommi Kivimäki
Tommi Kivimäki

Reputation: 116

I used to hide the WKWebView when I did the load request in one project.

webView.isHidden = true
webView.load(req)

When the load was completed I set the webView visible again.

func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
    webView.isHidden = false
}

func webView(_ webView: WKWebView, didFail navigation: WKNavigation!, withError error: Error) {
    activityIndicator.stopAnimating()
    webView.isHidden = false
}

Upvotes: 10

user5865651
user5865651

Reputation: 1538

To stop 'white flash' on your dark background, do this

webView.opaque = false

This doesn't really solve background colour issue, but at least it stops 'white flash' you are experiencing. Apparently there seem to be no way to change background colour of WKWebView before loading HTML on it.

Swift 4

webView.isOpaque = false

Upvotes: 131

Tomáš Pánik
Tomáš Pánik

Reputation: 596

Click on the WKWebView in soryboard, and choose preferred Background color from attributes inspector panel.

Then put content.isOpaque = false where your WKWebView is loaded from, for example in viewDidLoad()

@IBOutlet weak var content: WKWebView!
...
content.isOpaque = false

Upvotes: 9

BilalReffas
BilalReffas

Reputation: 8328

self.webView = WKWebView()
self.webView.backgroundColor = UIColor(red:0.11, green:0.13, blue:0.19, alpha:1)
self.webView.scrollView.backgroundColor = UIColor(red:0.11, green:0.13, blue:0.19, alpha:1)

Don't forget that your WKWebView is an optional so maybe you don't init it.

Upvotes: 27

Related Questions