Transparent background for WKWebView
IosSwiftWkwebviewIos Problem Overview
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?
Ios Solutions
Solution 1 - Ios
For iOS 10+ using Swift:
self.webView = WKWebView()
self.webView!.isOpaque = false
self.webView!.backgroundColor = UIColor.clear
self.webView!.scrollView.backgroundColor = UIColor.clear
Solution 2 - Ios
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
Solution 3 - Ios
using objective c.
wkWebView.backgroundColor = [UIColor clearColor];
wkWebView.scrollView.backgroundColor = [UIColor clearColor];
wkWebView.opaque = false;
It will remove the white background colour in wkwebView.
Solution 4 - Ios
This bug seems to be fixed in Beta 5.
Solution 5 - Ios
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.
Solution 6 - Ios
Code below works for me:
[wkWebView setValue:YES forKey:@"drawsTransparentBackground"];
Solution 7 - Ios
Uncheck Opaque
checkbox in Interface Builder
Update July 2021, Xcode 13
Looks like the checkbox is still there
Solution 8 - Ios
WKWebView for macOS with Objective-C
This is the magic line for transparent WKWebView views within macOS.
[webView setValue:[NSNumber numberWithBool: YES] forKey:@"drawsTransparentBackground"];
Solution 9 - Ios
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 WKWebView
s 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()
}
}
}
Solution 10 - Ios
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.
Solution 11 - Ios
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+
Solution 12 - Ios
In my case I need to change background-color to transparent in Styles and delete an App from phone/simulator manualny - it looks that WKWebView Cache HTML / Styles