Flyout text dissappears after locking the screen

[schsandor]

Description

This happens on Windows when the Flyout is set to locked and the app is maximized or if it's not in the foreground. If you lock the screen and then unlock it, the texts and labels in the Flyout will be gone.
I cannot test it on a Mac desktop, so I don't know whether it is an issue there or not. But as far as I know, this has been present since at least 7.0, as I have struggled to reproduce the issue for a long time. As I know the trigger, even the basic default app lets you reproduce it with a single FlyoutItem and a locked Flyout. The issue happens in Light and Dark mode as well.

Before locking the screen:

After locking the screen:

This is a very frustrating issue, as running an app in maximized mode and locking the screen when you step away from the computer are everyday occurrences. I always thought that the issue of disappearing FlyoutItems must be with my complex Flyout, with DataBinding or with Styles, but this seems to happen on a very basic level even without any added complexity on my part.

Steps to Reproduce

1. Create a new MAUI app.
2. Set the Flyout to be Locked in the AppShell.xaml file:
   Shell.FlyoutBehavior="Locked"
3. Add a FlyoutItem:
   <FlyoutItem Title="MainPage"> <Tab> <ShellContent ContentTemplate="{DataTemplate local:MainPage}" Route="MainPage" /> </Tab> </FlyoutItem>
4. Run the app.
5. Maximize it and check that the text of the Flyout is there.
6. Lock the screen (Windows+L).
7. Unlock it.

Expected behavior after the steps above:
Everything is awesome.

Actual behavior:
The Flyout is empty. This happens also if you add a Label to the Flyout. Images will stay visible, but any text (Title or Label) disappears.

Alternate method with the same results:
5. Switch to another window to be in the foreground and check that the text of the Flyout is there.

Link to public reproduction project repository

https://github.com/schsandor/DissappearingFlyoutText

Version with bug

8.0.40 SR5

Is this a regression from previous behavior?

Not sure, did not test other versions

Last version that worked well

Unknown/Other

Affected platforms

Windows

Affected platform versions

Windows 11 Home 23H2 22631.3737

Did you find any workaround?

No. If you change the size of the window, then the text comes back. But this is not a solution or a workaround in a production app.

Relevant log output

No response

[github-actions]

Hi I'm an AI powered bot that finds similar issues based off the issue title.

Please view the issues below to see if they solve your problem, and if the issue describes your problem please consider closing this one and thumbs upping the other issue to help us prioritize it. Thank you!

Open similar issues:

• Flyout labels are invisible after clearing custom FlyoutContent (#22324), similarity score: 0.80
• Setting Shell.FlyoutWidth causes problems on WinUI with changed values in binding context (#19496), similarity score: 0.77

Closed similar issues:

• items in flyout are transparent (#21865), similarity score: 0.77
• FlyoutItem text disappears in Release mode, but not in Debug mode (#16490), similarity score: 0.77
• [Windows] App based on FlyoutPage uses incorrect title bar colours when system is set to Dark theme and app set to Light theme - illegible content (#23057), similarity score: 0.76

Note: You can give me feedback by thumbs upping or thumbs downing this comment.

[schsandor]

I don't know if this helps, but can not reproduce on Win10 Home 22H2 (19045.4529). Did reproduce the issue on another Win11 machine (Pro 23H2 22631.3737) from the repo, as well as from the packaged app.

[schsandor]

The issue can also be reproduced if you don't set the FlyoutBehavior, so the default "Flyout" bahavior is in effect. Open the Flyout, lock and unlock the screen while the app is maximized or in the background and the text disappears.

[Ganeshkhole]

I am also facing same issue with flyout. For us even we press alt key it disappears. After Maximizing the window text again displays.

[jaakkohurtta]

The repo linked here does not reproduce the issue for me, however we are having this issue as well and just by pressing Alt makes our Flyout texts disappear. I managed pin point the issue (for us at least) to setting FlyoutWidth for the shell.

We had set FlyoutWidth="{OnPlatform 200, WinUI=300}" for our shell and simply removing this solves the issue for us. I also managed to repro this with a clean solution.

Edit:
There's an open issue related directly to this: #19496

[schsandor]

I am also facing same issue with flyout. For us even we press alt key it disappears. After Maximizing the window text again displays.

Now that I have spent some time with it, I found a way to repro this with the linked repository as well:
1-5: the same as above.
6. Press the alt key after maximizing the app, the flyout text disappears.

[schsandor]

The repo linked here does not reproduce the issue for me, however we are having this issue as well and just by pressing Alt makes our Flyout texts disappear. I managed pin point the issue (for us at least) to setting FlyoutWidth for the shell.

We had set FlyoutWidth="{OnPlatform 200, WinUI=300}" for our shell and simply removing this solves the issue for us. I also managed to repro this with a clean solution.

Edit: There's an open issue related directly to this: #19496

For me it still produces the same results with the linked repository. I also just now created a new project based on the steps listed above with the current VS (17.11.2), and it still does it. In this issue no changes are made to the width.
I am glad that you solved the issue by removing the width. Could you please check if the label stays visible if you maximize the window and immediately after that you press the alt key? For me this makes the text disappear even without setting the width.
Here is another repository for this, where I only changed one setting to make it easier to see:
Shell.FlyoutBehavior="Locked"
https://github.com/schsandor/DissappearingFlyoutText2
If you maximize the app and then press the alt key, the text disappears. You can also check it with the default project without changing anything. You just have to maximize, open the flyout and then press alt.
As you can set up hotkeys for you app, this makes it a regular problem for us, maximizing an app, locking the screen and using hotkeys are all basic occurrences you do a hundred times a day. So we run into this issue multiple times every day, and so it's a very frustrating paper cut in an UI-centric framework :(

[Ganeshkhole]

Yes, after removing flyoutwidth also it's reproduced. Maximize the window and press alt key text disappears.

[Ganeshkhole]

Thanks @Foda