Ionic splash screen hides without fading

Question

Working on my first Ionic project.

I'm not having any problems with the splash screen -- I'm able to use the CordovaSplashscreen plugin and tell it to hide() when the relevant promises resolve; I'm also able to comment out that hide'ing and just instead rely on AutoHideSplashScreen being true in config.xml, and let the splash screen auto hide after SplashScreenDelay.

(I list these things that do work so it's clear that my problem is not a duplicate of the dozens of Ionic and Cordova/PhoneGap-related splash screen questions.)

My problem is that no matter what I try -- ios, android, emulator, real device, using CordovaSplashscreen to hide() or not, AutoHideSplashScreen set to true, AutoHideSplashScreen set to false, etc. -- I can't get the splash screen to fade when it disappears.

FadeSplashScreen seems not to have any effect no matter what combination of config.xml settings, splash screen hide() calling or not calling, emulation or device, ios or android I use.

My current config.xml settings, though this doesn't give a full portrait of the dozen or so permutations of these values I've tried:

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<widget id="com.ionicframework.yourkids381244" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
... other code at same level of hierarchy omitted ... 
  <preference name="SplashScreen" value="screen"/>
  <preference name="AutoHideSplashScreen" value="false"/>
  <preference name="auto-hide-splash-screen" value="false"/>
  <preference name="ShowSplashScreenSpinner" value="false"/>
  <preference name="SplashScreenDelay" value="10000"/>
  <preference name="FadeSplashScreen" value="true"/>
  <preference name="FadeSplashScreenDuration" value="3.0"/>
... other code at same level of hierarchy omitted ... 
</widget>

And the code from my app.js routes which does the hide()'ing, though again, this doesn't seem to be part of the problem; it works, which I confirm by commenting out the hide() line and setting AutoHideSplashScreen to false, which successfully results in the splash screen never hiding; but from that state, I can't get hiding to fade out the splash screen, whether I hide by uncommenting the hide() line to use CordovaSplashscreen, or I set AutoHideSplashScreen to true.

  .state('app.main', {
    url: "/main",
    views: {
      'menuContent': {
        templateUrl: "templates/main.html",
        controller: ['$scope', '$timeout', '$ionicGesture',
        function($scope, $timeout, $ionicGesture) {
          $scope.$on('$ionicView.loaded', function() {
            ionic.Platform.ready( function() {
              $timeout(function() {
                if(navigator && navigator.splashscreen) {
                  // note that this works fine, except for the fading
                  navigator.splashscreen.hide();    
                }
              }, 500);
            });
          });
        }],
      }
    }
  })

(anticipating a comment about this not involving the resolution of a promise, that is done elsewhere and then app.main is presented... the point is, hiding this way does work, it just doesn't fade)

Any ideas of more things to try?

Answer 1

Try to delete all preferences in config.xml which contains splashcreen values. This is my complete config.xml preferences list:

<preference name="webviewbounce" value="false"/>
<preference name="UIWebViewBounce" value="false"/>
<preference name="DisallowOverscroll" value="true"/>
<preference name="BackupWebStorage" value="none"/>

Deleting these splashscreen lines should result in resetting the defaults. So the splashscreen should fade.