Transparent background WKWebView (NSView)

Question

I am building a Mac application using Swift. Therefor, I want to make a WKWebView transparent, so it shows the text of the loaded HTML, but the background of my underlaying NSWi

Answer 1

Updated, slightly better solution (2021). Use private property drawsBackground on WKWebViewConfiguration. It's property has been introduced in macOS 10.14 so it won't go away.

//https://opensource.apple.com/source/WebKit2/WebKit2-7610.2.11.51.8/UIProcess/API/Cocoa/WKWebViewConfigurationPrivate.h.auto.html
@property (nonatomic, setter=_setDrawsBackground:) BOOL _drawsBackground WK_API_AVAILABLE(macos(10.14), ios(12.0));

let configuration = WKWebViewConfiguration()
var requiresDrawBackgroundFallback = false
if #available(OSX 10.14, *) {                         
    configuration.setValue(false, forKey: "sward".reversed() + "background".capitalized) //drawsBackground KVC hack; works but private
} else {
    requiresDrawBackgroundFallback = true
}
let webView = WKWebView(frame: .zero, configuration: configuration)
if requiresDrawBackgroundFallback {
    webView.setValue(false, forKey: "sward".reversed() + "background".capitalized) //drawsBackground KVC hack; works but private
}

Answer 2

Code below works for me perfectly, also color is set to clearColor by default.

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

Answer 3

Use this in macOS 10.12 and higher:

webView.setValue(false, forKey: "drawsBackground")

Answer 4

I used this for macOS 10.12. without problems in OjbC:

[self.webView setValue:@YES forKey:@"drawsTransparentBackground"];

Under macOS 10.13.+ I got the following console warning message:

-[WKWebView _setDrawsTransparentBackground:] is deprecated and should not be used

The ONLY working solution was:

[self.webView setValue:@(NO) forKey:@"drawsBackground"];

I tried the below in many scenarios and it didn't work:

• give the webView and the enclosingScrollView a layer and edit it's properties (backgroundColor, isOpaque)
• give the webView and the enclosingScrollView a clear background color
• inject javascript without the setValue forKey: in the webview.

Additionally I did use:

- (void)webView:(WKWebView *)webView didFinishNavigation:(null_unspecified WKNavigation *)navigation
{
    if (self.isWebviewsBackgroundTransparent) {
        [self insertTransparentBackgroundTo:webView];
    }
}

- (void)insertTransparentBackgroundTo:(WKWebView *)webView
{
    NSString *transparentBackgroundJSSString = @"document.body.style = document.body.style.cssText + \";background: transparent !important;\";";
    [webView evaluateJavaScript:transparentBackgroundJSSString completionHandler:nil];
}

Answer 5

It was not supported, then they fixed it:

https://bugs.webkit.org/show_bug.cgi?id=134779

The way to make it transparent is to:

myWebView.opaque = false