Prevent the white flash when navigating between Maui Blazor Hybrid views

Joshua Engelbrecht 15 Reputation points
2024-05-23T15:36:00.33+00:00

I have a .NET 8 MAUI app that has a dark background (not only in dark mode). We require users to log or pin in to use the app and the login/pin entry page has a dark background and these pages are straight xaml pages. On success, we navigate them to the Main Landing Page. The main landing page is a content page with the BlazorWebView. When we call Navigation.PushAsync, the screen will flash white, then "loading" (from index.html) of the blazor web view, and then will apply the styling and colors of the index.html page.

Setting the style in the App.xaml doesn't work, neither does setting the background in the content xaml page. This happens in iOS and Windows. Haven't tested in android as it's not something this app needs to support.

More Details: https://stackoverflow.com/questions/77916299/maui-blazor-hybrid-background-colors-on-load

Minimal Reproducible App (.net 7 but still happens in 8): https://github.com/joshepkt/MAUIBlazorHybridFlash

Blazor
Blazor
A free and open-source web framework that enables developers to create web apps using C# and HTML being developed by Microsoft.
1,458 questions
.NET MAUI
.NET MAUI
A Microsoft open-source framework for building native device applications spanning mobile, tablet, and desktop.
3,071 questions
{count} vote

1 answer

Sort by: Most helpful
  1. Bruce (SqlWork.com) 59,306 Reputation points
    2024-05-23T16:11:40.15+00:00

    on IOS the default background color of a webview (used to host the Blazor app) is white. You need to set to transparent. something like:

       Microsoft.Maui.Handlers.WebViewHandler.Mapper.AppendToMapping("MyCustomization", (handler, view) =>
        {
    
    #if IOS || MACCATALYST
            handler.PlatformView.Opaque = false;
            handler.PlatformView.BackgroundColor = UIKit.UIColor.Clear;
    #endif
        });
    
    1 person found this answer helpful.