capacitor: bug: Android splash screen shifts (re-scales) as it transitions

Bug Report

Capacitor Version

Latest Dependencies:

  @capacitor/cli: 2.4.7
  @capacitor/core: 2.4.7
  @capacitor/android: 2.4.7
  @capacitor/electron: 2.4.7
  @capacitor/ios: 2.4.7

Installed Dependencies:

  @capacitor/ios not installed
  @capacitor/cli 2.4.4
  @capacitor/android 2.4.4
  @capacitor/core 2.4.4
  @capacitor/electron not installed

[success] Android looking great! �

Platform(s)

Android Pixel 4

Current Behavior

If you use “androidScaleType”: “CENTER_CROP” on your splash screen plugin config, the aspect ratio changes for the second part of the splashscreen display, but not the first, causing a noticeable shift.

Expected Behavior

Splash screen should not visibly change during load.

Code Reproduction

start with empty project, with suitably complete set of splashscreen images, then change the SplashScreen plugin configuration like so:

    "plugins": {
        "SplashScreen": {
            "launchShowDuration": 3000,
            "androidScaleType": "CENTER_CROP",
            "showSpinner": true
        }
    },

Run on a Pixel 4.

Other Technical Details

npm --version output: 6.14.4

node --version output: v12.18.0

Additional Context

https://github.com/ionic-team/capacitor/issues/1222 https://forum.ionicframework.com/t/bad-splashscreen-ratio-with-android-using-cli-new-feature/16159/20

About this issue

Original URL
State: closed
Created 3 years ago
Reactions: 9
Comments: 19 (1 by maintainers)

Most upvoted comments

Shame and disgrace that AFTER MORE THAN TWO YEARS (sic!) since the bug was reported, it still hasn’t been resolved! I cannot belive it. I would never in my life buy premium service from a company that so blatantly ignores problems in its own most important child. I totally understand why react-native or flutter is considered better and more developers work with it

I am seeing the same issue as well. The only workaround I found was setting the initial screen to a static background color and not showing the splash image.
<style name="AppTheme.NoActionBarLaunch" parent="AppTheme.NoActionBar">
    <item name="android:statusBarColor">#000000</item>
    <item name="android:navigationBarColor">#000000</item>
    <item name="android:background">#000000</item>
</style>
The drawback is that you get a blank screen without an image for about a second. If anyone has a better workaround let me know.

The above workaround does not work with the plugin from barcode scanner which require transparent background. My workaround (the drawback with blank white screen still exist there but it work):

    <style name="AppTheme.NoActionBar" parent="Theme.AppCompat.NoActionBar">
        <item name="android:windowActionBar">false</item>
        <item name="android:windowNoTitle">true</item>
        <item name="android:windowBackground">@android:color/white</item>
    </style>
    <style name="AppTheme.NoActionBarLaunch" parent="AppTheme.NoActionBar"></style>

Pacjonek on Jan 4, 2022