iOS splashscreen spinner not centered

Ionic Framework ionic-v3
#1

Hi,

I have an issue with the spinner of the splashscreen, it’s not centered on the screen. As you can see on the screenshot, it’s stuck on the top left corner.

image
splashscreen_spinner.jpg750×1334 26.3 KB

It works fine with Android. I tried on iOS 9.3 and 10.3 : same issue. I also tried different version of the cordova splashscreen plugin (4.0.1 and 4.0.3) : same issue.

Does somebody has an idea about that ?

Ionic info :

Cordova CLI: 6.4.0 
Ionic Framework Version: 2.1.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.1.3
ios-deploy version: 1.9.0 
ios-sim version: 5.0.13 
OS: macOS Sierra
Node Version: v6.9.4
Xcode version: Xcode 8.3.3 Build version 8E3004b
#2

Had the same problem few weeks ago. Try one of the following inside your config.xml:

<preference name="SplashMaintainAspectRatio" value="true" />

Or to just hide it:

<preference name="ShowSplashScreenSpinner" value="false" />
#3

Thanks, but the “SplashMaintainAspectRatio” property is not working. Hiding it obviously works, so if I can’t find any solution that is what I will do.

#4

What is the black rectangle? Did you customize the splash screen somehow?

#5

Hi,

The black rectangle is my company logo, I’m not allowed to show it so I removed it after taking the screenshot.

I generated the splash screen with ionic CLI (ionic resources), with the right images sizes (192×192 for icon, 2208×2208 for splash screen).

#6

Ah ok.

I would create a new project (ionic start blank blank), build it once to check the spinner is correct, place your resources files in there, run ionic cordova resources, build again to check if still correct. If yes, compare whole projects and see what is different (besides your custom code of course).

#7

Yes, it works with the blank project and my project’s resources. I didn’t find where the issue comes from yet, I keep searching, thanks.

#8

I’m getting closer to the origin of the issue. I removed the following line in the app.component.ts file :

Splashscreen.hide();

And I could see that the spinner goes back to the center of the splash screen once the platform is ready (this.platform.ready().then). Before that, the spinner is stuck at the top left corner. Do you have an idea ?

#9

No, that also doesn’t make sense to me.

#10

Yes, that’s weird. I built the project with the ‘–prod’ tag, and the spinner shows up at the wrong place like 2 seconds before it moves to the center, when I build in debug mode, it’s more like 7 seconds. It looks like there is something wrong during the initialization, but I can’t find what. I think I will have to hide the spinner :frowning:

1 Like
#11

Hello Alex,

I’m facing the same issue on my ios build… The spinner stucks on the top left corner whenever I start the app on Xcode Simulator. The preference

<preference name="SplashMaintainAspectRatio" value="true" />

doesn’t seems to solve the problem… Have you found any other solution rather than hidding the spinner? :sweat:

#12

Hi,

Sadly I didn’t find any solution, I had to hide the spinner :frowning:

#13

Ha, just realized, now I am in the same boat with a project I just built on iOS for the first time :wink:

Identical to what you describe the spinner starts out in the top left corner, then jumps to its correct position after some time before the app loads and the splashscreen disappears.

#14

Hi, I have the same issue and i can confirm, as many above have said, using

does not solve the problem. I am interested if anyone finds a solution besides hiding it. :slight_smile:

1 Like
#15

I have to this bug (( How to fix it ?

#16

This is still an issue!