Splashscreen leaves semi-transparent white overlay after hiding

[distinctdan]

Problem

The splashscreen is hiding correctly, but after it hides, it leaves behind a transparent white overlay that is making all my colors look ugly and washed out. Here are some screenshots of no splashscreen and with splashscreen:

No splashscreen plugin:

With splashscreen plugin:

Environment, Platform, Device

Here is my splashscreen config lines:

    <preference name="Fullscreen" value="true" />
    <preference name="SplashMaintainAspectRatio" value="true" />
    <preference name="SplashScreenDelay" value="10000" />
    <preference name="SplashShowOnlyFirstTime" value="false" />
    <preference name="ShowSplashScreenSpinner" value="false" />
    <preference name="AutoHideSplashScreen" value="false" />

I'm hiding it with navigator.splashscreen.hide(); after deviceready fires.

Version information

OS: Android 8.1.0
Cordova-CLI: 9.0.0
Cordova android platform: 8.0.0
Cordova-plugin-splashscreen: 5.0.2

Checklist

• I searched for existing GitHub issues
• I updated all Cordova tooling to most recent version
• I included all the necessary information above

[janpio]

Did you remote inspect your app's webview to debug and understand what is giving your app this semi-transparent white look? https://ionic.zone/debug/remote-debug-your-app#android-remote-debugging-with-chrome should work.

[distinctdan]

I haven't, I had assumed the splashscreen plugin only did native stuff and didn't touch the html. Are you saying it does DOM stuff too?

[janpio]

Not usually, but excluding any side effects in the web app would be a good first step - just to make sure before we dive deeper into what is going on.
Can you create two debug APKs of your app to look at maybe?

[distinctdan]

So I'm not willing to upload APK's because I don't want my app's source getting out yet, but I did look into it a bit more. I remote debugged the html and confirmed the problem isn't on the DOM side. Even after deleting all the html through the chrome html inspector, the grey overlay was still there.

However, I found something interesting: the problem only happens when I build using the cordova command line using cordova run android --device. If I run the app using android studio instead, the problem doesn't happen. I'm not sure why it would be different when building on the command line.

[janpio]

Is this reproducible in a new, plain Cordova app? A minimal reproduction repository would really help to debug and later fix this issue. More information on how to create one: https://github.com/apache/cordova-contribute/blob/master/create-reproduction.md

[distinctdan]

Gotcha, I'll see if I can repro it in a new repository.

[distinctdan]

Alright, here ya go: the problem happens in a vanilla repo; the only changes I made were to make the background black so you can see the issue: https://github.com/distinctdan/cordova-splashscreen-overlay-bug

The problem only happens when running from the command line. Here are screenshots of command line vs android studio:

[janpio]

Interesting, I can't reproduce this locally with your repo - I see full black background both with CLI and Android Studio build (Nexus 5, Android 6.0.1).

You might try the Android Layout Inspector with both builds of your app (maybe first build one with another package ID, so you can have them both installed at the same time): https://developer.android.com/studio/debug/layout-inspector Looks like this for me:

[distinctdan]

That's very interesting that it doesn't happen for you. I'm testing on a Nexus 5x running Android 8.1.0. Since you're testing on 6.0.1, it's possible it could only happen for newer versions of android. I was able to open both layouts in the layout inspector, but they were almost completely identical. I check all the properties, and the only difference were the mPrivateFlags properties of the id/content views and the webviews. The property changed between runs also, so I'm not sure what it is or if it's significant.

[janpio]

Do you only experience this on one device, or on multiple ones?

[distinctdan]

Not sure, my phone is unfortunately my only android device for now. The issue doesn't happen on the simulator.

[distinctdan]

This issue appears to have been fixed for me on the latest cordova-android version of 8.1.0. I suspect this focus PR might have been the fix: apache/cordova-android#750.

[distinctdan]

Turns out I was wrong, this issue still happens the first time I deploy the app to my device from android studio.

[evoactivity]

I'm seeing this on a customers device. I can't replicate the issue myself on any device I've tested, or emulator/simulator.

@distinctdan I understand this is an old issue but I'm hoping you found a way to mitigate this problem?

[evoactivity]

I've been able to replicate this issue in an emulator.

In android studio create a new device for a Nexus 5x with the Oreo framework API 27 and run the app, you should see it happen the first time the app is run. I can only trigger it again if I close the emulator and compltely wipe the data for it. I see the white overlay breifly, Android shows a dialog explaining the app is fullscreen, which seems to remove it, and then when you click ok the white overlay appears again for the lifetime of the app.

When the issue is visible I see nothing in the layout inspector that I think would cause it, but I'm not a native android developer so I could be missing something.

I thought it may be related to

cordova.getActivity().runOnUiThread(new Runnable() {
    @Override
    public void run() {
        getView().setVisibility(View.INVISIBLE);
    }
});

but commenting this out doesn't seem to have any affect. I actually don't understand how the webView regains it's visibility.

I'm a bit lost of what could possibly be causing this.

[evoactivity]

So I tried recreating again using the same emulator and the reproduction repo provided by @distinctdan. Running from cordova run android reliably recreates the issue with this emulator setup, I don't need to wipe the device for it to occur.

When I run with this code left as is

cordova.getActivity().runOnUiThread(new Runnable() {
    @Override
    public void run() {
        getView().setVisibility(View.INVISIBLE);
    }
});

The white overlay appears reliably. When I comment it out and run again, the white overlay does not appear and I do not see any side effects of this code not running? @janpio what is the purpose of setting the webview to be invisible and how does the view regain visibility?

@distinctdan any chance you could confirm commenting out that code from SplashScreen.java fixes the issue?

[evoactivity]

Just had confirmation from my client that the white overlay no longer displays on their devices with that code commented out.

[distinctdan]

@evoactivity Unfortunately, I never found a fix. I suspect it could be a bug in Android. I just lived with it because it only happened on the first run. I'm not that familiar at the moment with the splashscreen internals, but I believe that section is to hide the webview while it's loading. Presumably since you're showing a splashscreen, you don't want the webview visible yet. It's possible that the splashscreen might take a small delay to load, and it goes on top of the webview, so I think that line prevents the webview from possibly briefly showing.