iOS Splash background color is wrong

[davidortinau]

Description

I'm not sure if this only shows up on certain displays, but the generated RGB that ends up in the MauiSplash.Storyboard doesn't match the hex value provided in the csproj.

From csproj:

<MauiSplashScreen Include="Resources\Splash\splash.svg" Color="#512BD4" BaseSize="128,128" />

From MauiSplash.Storyboard:

<color key="backgroundColor" red="0.31764707" green="0.16862746" blue="0.83137256" alpha="1" colorSpace="custom" customColorSpace="displayP3"/>

Color picking in Photoshop this is #5729dd which is not #512BD4 and at least on my display is obviously wrong.

Steps to Reproduce

File > New and run on iPhone 13 Pro sim. My display settings:

Version with bug

6.0.486 (current)

Last version that worked well

Unknown/Other

Affected platforms

iOS

Affected platform versions

15

Did you find any workaround?

No response

Relevant log output

No response

[KSemenenko]

I have the same issue #9443

[KSemenenko]

Also there is no icon at all

<MauiSplashScreen Include="Resources\Splash\splash.svg" Color="#ED2C65" BaseSize="128,128" />

or

<MauiSplashScreen Include="Resources\Splash\splash.svg" TintColor="#ED2C65" Color="#ED2C65" BaseSize="128,128" />

[FirewizzNL]

I have got the same issue, I use a svg image with transparent background, but it still generates another color:

[KSemenenko]

About disappearing pictures.

When I changed params they are works fine for simulator

<MauiSplashScreen Include="Resources\Splash\splash.svg" Color="#ED2C65"  />
<MauiSplashScreen Include="Resources\Splash\splash.svg" Color="#ED2C65" BaseSize="128,128" />   // but no difference

But it looks the same.

so it looks like the splashscreen is not re-generated after changing the parameters.

[KSemenenko]

And it’s not working on AzureDevOps, so I still have empty rectangle

[FirewizzNL]

For me, when I used different content/image it helped to remove the bin and obj folder from my project.
But I think the svg is re-rendered different than the background itself causing the difference in color. I think the transparent background of the svg is replaced with the background color and rendered so that it changes color slightly and getting a bit dull of color as seen in both our projects.

[KSemenenko]

One more observation. SplashScreen works differently for different devices.
For iPads and small screens I see my SplashScreen as it should. but on the iPhone 13 Pro Max it does not. only an empty square of the wrong color.

[KSemenenko]

For me, when I used different content/image it helped to remove the bin and obj folder from my project.
But I think the svg is re-rendered different than the background itself causing the difference in color. I think the transparent background of the svg is replaced with the background color and rendered so that it changes color slightly and getting a bit dull of color as seen in both our projects.

Your advice helped, I removed the transparent background and the logo appeared on devices with small screens.

more updates:
I rename splash.svg to another name, and now it's appear.

[FirewizzNL]

But someone fixed the color difference on the image/backgound?

[KSemenenko]

nope, color is still not ok

[FirewizzNL]

Someone with a workaround or any progress on this? Looks quite flimsy like this when releasing.

[e1T]

I'm experiencing the same issue. One workaround might be to convert the svg to png manually and use that png as splash screen, but obviously this diminishes the advantage of using svg.

[KSemenenko]

I'm experiencing the same issue. One workaround might be to convert the svg to png manually and use that png as splash screen, but obviously this diminishes the advantage of using svg.

Background color is the issue

[KSemenenko]

Any updates? Will it be fixed in .net 7?

[KSemenenko]

More details here - it's issue with icon generator

[KSemenenko]

@FirewizzNL for fast solution you can change your background for SPlashScreen for icon background color.
<MauiSplashScreen Include="Resources\Splash\splashscreenwitnk.svg" Color="#DB446A" Resize="true" BaseSize="128,128" />

[iagocc-wapping]

Hello,
I have the same issue in iOS devices, tried a lot of things the color difference is still there while using .svg.
@KSemenenko the fast solution that you mention resolves this issue? I tried setting the color in the MauiSplashScreen, and changes the background but the problem persists.

[KSemenenko]

@iagocc-wapping yes, so my steps

1. create svg with background color.
2. Add splash screen and background color:
   <MauiSplashScreen Include="Resources\Splash\splashscreenwitnk.svg" Color="#DB446A" Resize="true" BaseSize="128,128" />
3. make screenshot of SplashScreen
4. pick icon background color (it will be different, because of issue with image generator.
5. replace splashscreen background color with color form icon background.

then you will have little bit different color, but it will looks ok.

so, issue is - wrong icon background color, and should use iconbackgrd colorer (after generation of images) for SplashScreen background

[beeradmoore]

Won't this then be broken on Android as you are explicitly using two different colours as this issue is iOS only?

[KSemenenko]

Won't this then be broken on Android as you are explicitly using two different colours as this issue is iOS only?

you can do like this

<ItemGroup Condition="$(TargetFramework.Contains('-ios'))">
      <!-- App Icon -->
      <MauiIcon Include="Resources\AppIcon\appicon.svg" ForegroundFile="Resources\AppIcon\ios.svg" Color="#ED2C65" />
  </ItemGroup>

  <ItemGroup Condition="$(TargetFramework.Contains('-android'))">
      <!-- App Icon -->
      <MauiIcon Include="Resources\AppIcon\appicon.svg" ForegroundFile="Resources\AppIcon\android.svg" Color="#ED2C65" />
  </ItemGroup>
  

[beeradmoore]

Oh, true. Thanks.

[mattleibow]

For the splash not updating, it is more a device/simulator issue because the OS seems to be caching things: #8685

[mattleibow]

I am going to look and see why the image has the incorrect color - I see it in the .NET splash so I can reproduce.

But, I am also going to investigate NOT drawing a background color on the bitmap - so it will remain a transparent image. Unless this will cause other issues.

One issue is that if you use the same image for the icon and the splash, it will have the same filename - for example "appicon" for the MauiIcon and the MauiSpashScreen. As a result, the icon may set a color anyways. Basically these issues:

• Android does not handle images/splash/icons with the same name and overwrites #9170
• Tizen does not handle images/splash/icons with the same name and overwrites #9168
• iOS / MacCatalyst does not handle images/splash/icons with the same name and overwrites #9169

I think best practice would be to make sure you don't have images with the same name being used for multiple things - like icons, images and splash.

[KSemenenko]

also app icons for iOS and Android have different size