Transparent background for WKWebView

Question

In my app I wish to make the WKWebView with transparent background, so the view behind (an ImageView) can show through as background picture.

    webView!.opaque = false
    webView!.backgroundColor = UIColor.clearColor()

The code above works fine with UIWebView, but if webView is WKWebView, a white background will be shown.

Also tried putting transparent background color in CSS. The result is the same, only works in UIWebView but not WKWebView. Any suggestion?

Answer 1

For iOS 10+ using Swift:

self.webView = WKWebView()
self.webView!.isOpaque = false
self.webView!.backgroundColor = UIColor.clear
self.webView!.scrollView.backgroundColor = UIColor.clear

Answer 2

This code might help you. Updated for Swift 3+

self.webView = WKWebView()
self.webView.isOpaque = false
self.webView.backgroundColor = UIColor.clear
self.webView.scrollView.backgroundColor = UIColor.clear

Answer 3

using objective c.
wkWebView.backgroundColor = [UIColor clearColor];
wkWebView.scrollView.backgroundColor = [UIColor clearColor];
wkWebView.opaque = false;

It will remove the white background colour in wkwebView.

Answer 4

This bug seems to be fixed in Beta 5.

Answer 5

I know this is a very old question. But I've been struggling with this today. I don't know if it's just me, but webView.backgroundColor was undefined in WKWebView, and webView.opaque was read-only. The only way for me to fix this was to set the web views layer background color to the CGColor clear

webview.wantsLayer = true
webView.layer?.backgroundColor = NSColor.clearColor().CGColor

and the containing NSView the same way

webViewParent.layer?.backgroundColor = NSColor.clearColor().CGColor

That's the only thing that worked for me, I hope it could help someone else as well.

Answer 6

Code below works for me:

 [wkWebView setValue:YES forKey:@"drawsTransparentBackground"];

Answer 7

Uncheck Opaque checkbox in Interface Builder

Update July 2021, Xcode 13

Looks like the checkbox is still there

Answer 8

If you're loading a PDF and want a background color different than the standard gray, it seems that it is necessary to wait until the document is loaded, then clear the backgrounds of the subviews. The advantage of using a WKWebView over a PDFView (iOS 11+) is that WKWebViews have double-tap to zoom and a page count indicator built in, and are compatible with older versions of iOS.

It should be noted that it's not a great practice to dig into system views like this as Apple can change the implementation at any time, potentially breaking the solution.

Here is how I implemented a PDF preview controller with a black background in Swift 4:

class SomeViewController: UIViewController {

    var observer: NSKeyValueObservation?
    var url: URL

    init(url: URL) {
        self.url = url
        super.init(nibName: nil, bundle: nil)
    }

    func viewDidLoad() {
        super.viewDidLoad()
        self.view.backgroundColor = UIColor.black
        let webView = WKWebView()
        webView.translatesAutoResizingMaskIntoConstraints = false
        self.view.addSubview(webView)
        NSLayoutConstraint.activate([
            webView.topAnchor.constraint(equalTo: self.view.topAnchor),
            webView.leftAnchor.constraint(equalTo: self.view.leftAnchor),
            webView.rightAnchor.constraint(equalTo: self.view.rightAnchor),
            webView.bottomAnchor.constraint(equalTo: self.view.bottomAnchor)
        ])

        self.observer = webView.observe(\.isLoading, changeHandler: { (webView, change) in
            webView.clearBackgrounds()
        })

        webView.loadFileURL(self.url, allowingReadAccessTo: self.url)

    }
}

extension UIView {
    func clearBackgrounds() {
        self.backgroundColor = UIColor.clear
        for subview in self.subviews {
            subview.clearBackgrounds()
        }
    }
}

Answer 9

WKWebView for macOS with Objective-C

This is the magic line for transparent WKWebView views within macOS.

[webView setValue:[NSNumber numberWithBool: YES] forKey:@"drawsTransparentBackground"];

Answer 10

Haven't worked with WKWebView yet but even UIWebView used to have this issue and the solution was to wrap the html content inside something like this:

<body style="background-color:transparent;"></body>

Hope it helps.

Answer 11

I don't know if it can help, but i used this solution below:

func setBackgroundWhite(subviews: [UIView]) {
  for subview in subviews {
    subview.backgroundColor = .white
    setBackgroundWhite(subviews: subview.subviews)
  }
 }

This does recursive call inner in subviews, setting up the background to white, or another color.

I used this code when loading PDF files, WKWebView and iOS 10+