3

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.

Community
  • 1
  • 1
RosaK
  • 31
  • 1
  • 5
  • Try setting the alpha to 0. That will reduce the opacity. – SagarU Feb 24 '17 at 20:33
  • changing the alpha on the view will impact all the components on the wkWebview. I'm only interested in making the background transparent. – RosaK Feb 24 '17 at 20:57

2 Answers2

8

You can try out the following snippet:

webView.opaque = false
webView.backgroundColor = UIColor.clearColor()
webView.scrollView.backgroundColor = UIColor.clearColor()
ystack
  • 1,785
  • 12
  • 23
4

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.

Chris Edgington
  • 1,208
  • 12
  • 11
  • Hello Chris , could you provide an example as I still can't get it to work. – RosaK Feb 25 '17 at 03:56
  • Hello Chris , could you provide an example of your DIV elements sized properly as I still can't get it to work. In my html code I'm setting the background color using – RosaK Feb 25 '17 at 04:14
  • Thank you I've started a new project and the wkwebview is now transparent. It must have been a setting in my storyboard – RosaK Feb 25 '17 at 12:31