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 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!

score 28 · Answer 1 · answered Oct 26 '16 at 16:49

28

Use this in macOS 10.12 and higher:

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

answered Oct 26 '16 at 16:49

Ely

8,259
1
54
67

2

This should be the accepted answer, as it was the only one (in Swift) that has worked for me on 10.15.4. – vfxdev Apr 09 '20 at 16:45
2022: This does not work any longer (macOS 12.4) – ixany Jul 12 '22 at 08:56
@ixany It still works at my side, using macOS 12.4. – Ely Jul 12 '22 at 13:31

score 9 · Accepted Answer · answered Jun 05 '15 at 17:29

9

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

answered Jun 05 '15 at 17:29

AJ Venturella

4,742
4
33
62

This is for me the perfect solution. – superpuccio Feb 09 '16 at 14:46
15

NSView only has a readonly "isOpaque", so this doesn't work. This would only work on iOS. – richkzad Jul 03 '18 at 21:36

score 5 · Answer 3 · answered May 16 '15 at 21:24

5

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

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

answered May 16 '15 at 21:24

kisileno

787
9
23

1

SetValue:YES is disallowed with ARC. [NSNumber numberWithBool:YES] should be use. And also there is no key value coding-compliant drawsTransparentBackground for the WKWebView – Onder OZCAN Jun 01 '15 at 08:50
1

So this _does_ work when called correctly: `[wkWebView setValue:@(YES) forKey:@"drawsTransparentBackground"];` (note the `@(YES)`; Inna's `[NSNumber numberWithBool:YES]` is equivalent). The view is KVC compliant for this key at least on 10.11; it triggers the internal method `_setDrawsTransparentBackground:`. – DarkDust Feb 18 '16 at 12:46
Also, at least the `WKWebView`'s parent view must be layer-backed or layer-hosted. In a non-layered environment you get strange results (window is completely transparent where the web view is transparent; you do not see the views below the web view). – DarkDust Feb 18 '16 at 12:48

score 4 · Answer 4 · answered Apr 09 '18 at 15:24

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

Marek H · Answer 5 · 2022-07-13T06:45:51.680

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
}

@ixany I have just tried it and it works without a problem. Please note I use new wkwebview with provided configuration and not grabbing it from xib/storyboard — Marek H, Jul 12 '22 at 15:48

Transparent background WKWebView (NSView)

5 Answers5

Linked