Prevent the white flash when navigating between Maui Blazor Hybrid views

Question

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

Answer 1

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
    });