Not working on web

[RednibCoding]

Describe the bug
After setting up a splash screen, and launching the web app, it still shows the blue flutter loading bar ontop of the page while loading but it now shows a black background instead of the usual white background. But no image.

In the debug console i get the following warning:
WARNING: found an existing tag. Flutter Web uses its own viewport configuration for better compatibility with Flutter. This tag will be replaced.

I am using:

• Dart version 2.16.1
• Flutter version 2.10.3
• flutter_native_splash: ^2.1.2+1

Flutter doctor
[√] Flutter (Channel stable, 2.10.3, on Microsoft Windows [Version 10.0.19042.1586], locale de-DE)
[√] Android toolchain - develop for Android devices (Android SDK version 31.0.0-rc1)
[√] Chrome - develop for the web
[!] Visual Studio - develop for Windows (Visual Studio Professional 2022 17.0.7)
X Visual Studio is missing necessary components. Please re-run the Visual Studio installer for the "Desktop development with C++" workload, and include these components:
MSVC v142 - VS 2019 C++ x64/x86 build tools
- If there are multiple build tool versions available, install the latest
C++ CMake tools for Windows
Windows 10 SDK
[√] Android Studio (version 4.2)
[√] IntelliJ IDEA Ultimate Edition (version 2020.2)
[√] VS Code (version 1.65.2)

[jonbhanson]

@RednibCoding please give steps to reproduce.

Did you run flutter pub run flutter_native_splash:create?

Please post your config.

[jonbhanson]

Closing due to inactivity. Feel free to reopen with the requested information if you are still having trouble.

[spanky411]

This seems to only be present with a background image on web. The height isnt filling out the viewport.
The following at the top of splash/splash.css seems to do the trick:

html, body {
    height:100%;
} 

Also, the background color in body is set to black. It probably should be omitted or set to white in light mode. That doesn't matter too much since the image should take up the whole view area.

[Bungeefan]

@jonbhanson This issue seems to be still active, can you reopen this issue or should we open a new one?

[jonbhanson]

@Bungeefan can you give steps to reproduce?

[Bungeefan]

Config as from #429

To Reproduce
Steps to reproduce the behavior:

1. Set the config
2. Run flutter pub run flutter_native_splash:create
3. Run flutter in browser, splash should be with the image but black background. (I tried Edge and Chrome)

Also I am using Flutter 3.3.3

[jonbhanson]

I will soon push an update that should fix this.

[Bungeefan]

@jonbhanson Any updates on this?
It still seems to be broken in the latest version (2.2.14).

[jonbhanson]

This should be fixed by b662516. Feel free to reopen if you are still having a problem.

[Bungeefan]

@jonbhanson Thanks for looking into this again!
Sadly it didn't fix it, as the html and body elements are still having a height of 0px.

Any reasons against the snippet from @spanky411?
This seems to reliably fix it in Firefox and Chromium.

Also it seems like you are using black (#000000) as the default LIGHTBACKGROUNDCOLOR, wouldn't it be better to use white for light mode?

[Bungeefan]

This seems to be an even better approach:

html {
  height: 100%
}

body {
  min-height: 100%;
}

Side note: I noticed that in the prefers-dark block, exactly the same properties (margin, height) are overwritten again.