CODEWITHSUNDEEP
macosswiftappkit
danielbuechele
danielbuechele

Reputation: 3102

Transparent background WKWebView (NSView)

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 NSWindow is visible. I tried

webView.layer?.backgroundColor = NSColor.clearColor().CGColor;

which hadn't any effect. WKWebView inherits from NSView, but I don't know if this helps.

Another solution would be to insert a NSVisualEffectView as the background of the WebView, but I don't know how to accomplish that, either!

Upvotes: 12

Views: 5999

Answers (5)

Marek H
Marek H

Reputation: 5566

Updated, slightly better solution (2022). There is a private property drawsBackground on WKWebViewConfiguration. This 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


//One can verify that the property still exists: 
//https://github.com/WebKit/WebKit/blob/main/Source/WebKit/UIProcess/API/Cocoa/WKWebViewConfigurationPrivate.h
@property (nonatomic, setter=_setDrawsBackground:) BOOL _drawsBackground WK_API_AVAILABLE(macos(10.14), ios(12.0));

Example:

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
}

Upvotes: 2

Darkwonder
Darkwonder

Reputation: 1305

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];
}

Upvotes: 5

Ely
Ely

Reputation: 9131

Use this in macOS 10.12 and higher:

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

Upvotes: 31

AJ Venturella
AJ Venturella

Reputation: 4912

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

Upvotes: 10

kisileno
kisileno

Reputation: 787

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

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

Upvotes: 5

Related Questions