Android animation shows longer than background of splash screen

[felixbroehl]

Bug report

On android the background of the splash screen hides noticeable before the animation. I recorded an screencast:

What steps will reproduce the problem?

I'm hiding the splash screen within the app by calling this.lottieSplashScreen.hide();

Version information

cordova info
cordova-lib@9.0.1 with:
  cordova-common@3.2.0
  cordova-create@2.0.0
  cordova-fetch@2.0.1
  cordova-serve@3.0.0

Environment: 
  OS: darwin
  Node: v10.16.0
  npm: 6.13.7

Plugins:
  cordova-clipboard
  cordova-custom-config
  cordova-plugin-add-swift-support
  cordova-plugin-androidx
  cordova-plugin-androidx-adapter
  cordova-plugin-appavailability
  cordova-plugin-browsertab
  cordova-plugin-camera
  cordova-plugin-compat
  cordova-plugin-contacts
  cordova-plugin-device
  cordova-plugin-file
  cordova-plugin-globalization
  cordova-plugin-inappbrowser
  cordova-plugin-ionic-keyboard
  cordova-plugin-ionic-webview
  cordova-plugin-localization-strings
  cordova-plugin-lottie-splashscreen
  cordova-plugin-network-information
  cordova-plugin-qrscanner
  cordova-plugin-statusbar
  cordova-plugin-whitelist
  cordova-plugin-x-socialsharing
  cordova-sqlite-storage
  cordova.plugins.diagnostic
  es6-promise-plugin
  ionic-plugin-deeplinks

Android platform:
  ERROR: android: Command failed with exit code ENOENT

iOS platform:
  Xcode 11.3.1
  Build version 11C504

config.xml

Please provide any additional information below.

I'm using version 0.8.0

Checklist

• [ ] If there is a (potential) plugin conflict, I've identified the conflicting plugin
• [x] I have added a valid version output
• [x] I have attached necessary information like a screenshot, example project or videos

[timbru31]

I can't reproduce this issue on an emulator. Can you share your config.xml or the specific properties you've set for Lottie? Are you experiencing the issue on a real device or an emulator? What's the Android version of the affected device?

[felixbroehl]

Here are all preferences from my config:

    <preference name="ScrollEnabled" value="false" />
    <preference name="android-minSdkVersion" value="21" />
    <preference name="BackupWebStorage" value="none" />
    <preference name="LottieAnimationLocation" value="www/lottie/splash.json" />
    <preference name="AndroidLaunchMode" value="singleTask" />
    <preference name="WKWebViewOnly" value="true" />

I'm hiding the Splashscreen inside my ionic app with this.lottieSplashScreen.hide(); inside this.platform.ready().then(() => {this.lottieSplashScreen.hide();}) I'm experienced the error on an emulator and not tested it on an real device. The emulator was an Pixel 2 running API level 29. By the way my animation has a squared white background.

So I already changed my app to using fading.

So the fading on iOS also doesn't worked as I think it is intended by only fading the animation and not the background., so I already added an white full screen div that I'm fading from opacity 1 to 0 after the fade of the splash screen ended. Could I also submit an issue on that?

[timbru31]

Thanks for the information, I'll debug this further.

---

So the fading on iOS also doesn't worked as I think it is intended by only fading the animation and not the background., so I already added an white full screen div that I'm fading from opacity 1 to 0 after the fade of the splash screen ended. Could I also submit an issue on that?

Sure, this could be a further enhancement.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[timbru31]

Not stale, that’s still on my todo list.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[andremartin]

I am experiencing the same when delaying the splash screen. I think the issue is that the "outer" splashDialog should always be rendered in fullscreen to create a covering background and a second inner dialog should be used to render then the Lottie animation in normal or full screen mode depending on the options set in the config.xml file.

[timbru31]

Any chance you can provide a sample application that shows the problem @andremartin ? I've failed to reproduce this so far.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[timbru31]

Not stale, I need to finally allocate some time to investigate this further.

[abomadi]

I have the same issue as well

[timbru31]

Can you provide a sample app that shows the actual problem? @abomadi

[abomadi]

@timbru31 It's a production app where this issue appeared, however on Pixel 2 API 28 Emulator the issue is there also changing background color does not work

[abomadi]

@timbru31

[timbru31]

That does not help me. If tried to reproduce the issue but was unable to do so. Unless one can provide a reproducible example it’s very difficult to fix or even debug this.

[abomadi]

@timbru31 i totally understand, i will try to create a new project for this to help

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[blahblehblah]

Same issue for me using ionic.

[timbru31]

Again, such a comment does not help. In order to fix this matter I need a reproducible example.

[sebafra]

Hi @timbru31, Maybe there si something with de color selected, or color codes. I´m experiencing the same issue that @abomadi describes with color black (#000000), but it works well with the color of the example you provide ( <preference name="LottieBackgroundColor" value="#fff000a3" />) Also, when i used other color i need: #007dae, the result is a fucsia screen. Tested in android device (Android 10) & ionic 5

[timbru31]

Thanks for the pointer, worth investigating 👍

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[timbru31]

bump.

[DanielaMazur]

Hi @timbru31, I am facing the same issue so I created a repo that reproduces it. Hope this will help with further investigations. I was able to reproduce it on a device with android 11.

[timbru31]

Awesome, thank you very much. This will definitely help.

[BugProg]

Hi there !

I have the same issue with Ionic (Angular).

This is the repo with the issue. https://gitlab.com/m9712/mygarden/-/tree/lottie_splash_screen

I created another blank Ionic app with the same ionic and angular version, but this time all work perfectly, but I don't know why :). https://gitlab.com/BugProg/lottie-exp

I hope it could help you and if you have any question I will reply as soon as possible.