Background flickering on startup

Capacitor
1

I am trying to build an iOS app that can support the native dark mode. Somewhere between the log lines " APP ACTIVE" and “WebView loaded” that flashes a white background. How can I prevent this flicker? Not sure where it’s coming from? Anyone been through this before?

Update: It apparantly has something to do with Capacitor SplashScreen backgroundColor. I can’t seem to make it transparent. When I turned it red like below, it flickered red. So I think I found the guilty party! Now how can I make it transparent?

		"SplashScreen": {
			"backgroundColor": "#FF0000"
1 Like
2

I’ve created a blank project which will replicate the problem:

The only thing I’ve done is:

  • swap the default splash image for a transparent PNG
  • Change the LaunchScreen.Storyboard background to System Background Color
  • I’ve been playing around with the capacitor.config.json

@mhartington I know you a sample project to help debug. Can you help me figure out the flicker?

3

So good news/bad news.

Good news, I think I’ve figured out where the issue is coming from and how to resolve it.
Bad news, this will require a PR to capacitor.

Part of what will happen is that we’ll need to modify how capacitor sets colors on the inner wkwebview.

webView?.isOpaque = false
    if let backgroundColor = (bridge!.config.getValue("ios.backgroundColor") as? String) ?? (bridge!.config.getValue("backgroundColor") as? String) {
        if #available(iOS 13.0, *) {
            webView?.backgroundColor = UIColor.systemBackground
        }
            else {
            webView?.backgroundColor = UIColor(fromHex: backgroundColor)
        };
        webView?.scrollView.backgroundColor = UIColor(fromHex: backgroundColor)
    }

This will probably take some time to address.

3 Likes
4

If you open the PR I’ll move on with my dev work and circle back in 3-4 months? Obviously not the biggest UI problem ever. Just a big fan of dark mode and this is the last thing I need to get working! Thanks!

5

I have same problem too but in android

6

The same here in android. is it fixed?

7

Nope!!! We need @mhartington to help! It’s been months. Both operating systems have issues.

1 Like
8

This has been fixed for some time in the latest release of Capacitor iOS

Please open a new post with details about Android.

2 Likes