Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

iOS Transparent background for WKWebView

I'm in the process of migrating some code over from UIWebView to a WKWebView on a iOS project. I'm currently trying to make a wkwebview transparent but the functionality doesn't seem work. I could do this on a UIWebView by doing this

self.opaque = NO;  
self.backgroundColor = [UIColor clearColor];  

and setting the html page to be transparent via styling would allow me to see the view content underneath.

If I try the same code on a WKWebView the background of the html page isn't becoming transparent. I've had search on google and there seems to be work around for MacOS X but I can't see to find a solution for iOS.

This is how it's done on a UIWebView (How to make a transparent UIWebView) Has anyone any ideas if this is possible?

Thank you.

like image 513
RosaK Avatar asked Oct 26 '25 10:10

RosaK


2 Answers

You can try out the following snippet:

webView.opaque = false
webView.backgroundColor = UIColor.clearColor()
webView.scrollView.backgroundColor = UIColor.clearColor()
like image 118
ystack Avatar answered Oct 29 '25 01:10

ystack


This is exactly how our app works - we rely on the transparency. Our WkWebView is made transparent with this code:

_primaryWebView = [[WKWebView alloc] initWithFrame:frame configuration:theConfiguration];
_primaryWebView.opaque = false;
_primaryWebView.backgroundColor = [UIColor clearColor];

Our web content hosted in the WkWebView has a transparent background, then for the areas of the page where we want to see the native content we place DIV elements sized properly, with a transparent background. This allows us to easily combine HTML and native iOS content.

like image 20
Chris Edgington Avatar answered Oct 29 '25 01:10

Chris Edgington



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!