Skip to content
Permalink
Browse files

Implement 'backgroundColor' style

Summary:
@public

This diff implements background colors for the `RCTWKWebView` component by proxying the background color prop to the underlying `WKWebView` and its underlying `UIScrollView`.

There's few differences between `backgroundColor` in `RCTWebView` and `RCTWKWebView` implementations:
1. With `UIWebView,` the background color gets applied after the page loads. With `WKWebView`, this isn't necessarily true. This results in a white flicker on solid backgrounds because sometimes, the background color is set before the page loads. This video illustrates the problem: https://our.intern.facebook.com/intern/px/p/9QBH
1. As far as I can tell, `WKWebView` doesn't handle transparent backgrounds correctly. Either that, or I could be setting the background color incorrectly. I set the background color to `rgba(1, 1, 1, 0.5)` and recorded how both `RCTWebView` and `RCTWKWebView` render. These two videos indicate the differences:
**RCTWebView: Lighter background**
https://pxl.cl/9R13
**RCTWKWebView: Darker background**
https://pxl.cl/9R1b

I tried to replicate this on the web. According to [[ https://our.intern.facebook.com/intern/fiddle/zCHu/ | this fiddle ]], `RCTWebView` is correct. Clearly, RCTWKWebView is rendering transparent backgrounds a bit darker than necessary. This doesn't seem simple to debug, so I've created a task to document this work: T23815343. I'll get to it eventually.

Reviewed By: shergin

Differential Revision: D6398209

fbshipit-source-id: 1812cb68133bc18a3278f6b328d7b085362528b0
  • Loading branch information...
RSNara authored and facebook-github-bot committed Aug 16, 2018
1 parent 1af17f1 commit 215fa14efc2a817c7e038075163491c8d21526fd
Showing with 18 additions and 0 deletions.
  1. +18 −0 React/Views/RCTWKWebView.m
@@ -15,6 +15,7 @@ @interface RCTWKWebView () <WKUIDelegate, WKNavigationDelegate, WKScriptMessageH

@implementation RCTWKWebView
{
UIColor * _savedBackgroundColor;
}

- (void)dealloc
@@ -56,6 +57,19 @@ - (void)didMoveToWindow
}
}

- (void)setBackgroundColor:(UIColor *)backgroundColor
{
_savedBackgroundColor = backgroundColor;
if (_webView == nil) {
return;
}

CGFloat alpha = CGColorGetAlpha(backgroundColor.CGColor);
self.opaque = _webView.opaque = (alpha == 1.0);
_webView.scrollView.backgroundColor = backgroundColor;
_webView.backgroundColor = backgroundColor;
}

/**
* This method is called whenever JavaScript running within the web view calls:
* - window.webkit.messageHandlers.[MessageHanderName].postMessage
@@ -236,6 +250,8 @@ - (void) webView:(WKWebView *)webView
}];
_onLoadingError(event);
}

[self setBackgroundColor: _savedBackgroundColor];
}

- (void)evaluateJS:(NSString *)js
@@ -292,6 +308,8 @@ - (void) webView:(WKWebView *)webView
} else if (_onLoadingFinish) {
_onLoadingFinish([self baseEvent]);
}

[self setBackgroundColor: _savedBackgroundColor];
}

- (void)injectJavaScript:(NSString *)script

3 comments on commit 215fa14

@oferRounds

This comment has been minimized.

Copy link

oferRounds replied Aug 28, 2018

oh, the video links are broken :\ (came here from the blog’s link)

@pascalgagneur

This comment has been minimized.

Copy link

pascalgagneur replied Oct 17, 2018

All links seem broken to me

@Monte9

This comment has been minimized.

Copy link
Contributor

Monte9 replied Oct 24, 2018

Yeah seems like it might only be accessible internally by fb employees. (https://our.intern.facebook.com)

Please sign in to comment.
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.