dotnet / maui

.NET MAUI is the .NET Multi-platform App UI, a framework for building native device applications spanning mobile, tablet, and desktop.
https://dot.net/maui
MIT License
21.95k stars 1.7k forks source link

Shell page transition animation causes color blinking #16621

Open Totalq09 opened 1 year ago

Totalq09 commented 1 year ago

Description

Shell page transition causes a severe color blinking, especially for a dark themed application. It looks like the application uses default, light system theme when entering the page and then applying currently selected theme from application. See the gif below. The white blink is visible on the entire screen, furthermore the tabbar color transition from white to black is visible as well.

Occurs for both navigation invocation:

await Shell.Current.GoToAsync($"//{Routes.WelcomePage}", false); await Shell.Current.GoToAsync($"//{Routes.WelcomePage}", true);

page_transitions

Tested on .NET: 8.0.100-preview.7.23376.3 MAUI: 8.0.0-preview.6.8686 and 8.0.0-preview.7.8842

In my opinion, expected behaviour is to either apply theme changing once it is triggered and do not invoke such color transition animations during further page transitions or add Shell navigation parameter to enable/disable the animation. Currently existed Shell.Current.GoToAsync "animate" parameter seems not to be respected at all.

Steps to Reproduce

Download the code from the public repo Deploy onto an Android simulator and observe the problem.

Link to public reproduction project repository

https://github.com/Totalq09/MAUITabBarProblem

Version with bug

8.0.0-preview.6.8686

Last version that worked well

Unknown/Other

Affected platforms

Android

Affected platform versions

Tested on Android 13 and Android 9 with the same effect

Did you find any workaround?

No, even custom ShellRenderer did not help

Relevant log output

No response
ghost commented 1 year ago

We've added this issue to our backlog, and we will work to address it as time and resources allow. If you have any additional information or questions about this issue, please leave a comment. For additional info about issue management, please read our Triage Process.

XamlTest commented 1 year ago

Verified this on Visual Studio Enterprise 17.8.0 Preview 1.0. Repro on Android 13.0-API33 .NET 8, not repro on iOS 16.4 with below Project: MAUITabBarProblem.zip

nuxosio commented 8 months ago

I'm having the same issue on Windows. Any solution or workaround to fix this?

plppp2001 commented 4 months ago

What does this Animate flag do anyways? I don't see a difference...

BruceHaley commented 3 months ago

My workaround for this is to force a dark theme natively in the Android app. In Platforms\Android\MainApplication.cs, insert in the class constructor the line: AppCompatDelegate.DefaultNightMode = AppCompatDelegate.ModeNightYes;

A simple fix for this might be for the transition animation to force a black background regardless of whether the theme is light or dark. That would mean the animation always showed a black border around the screen for page transitions. In a dark theme, the eye would not notice the border. In a light theme, the eye would see the border as background against which the new page expanded to full size. The appearance would look normal.