Description

I hope this is not a big one to find out and finding the root cause/issue, since this is a sporadic one.

In my AppShell, I have a Flyout with a Shell.FlyoutHeader, Shell.FlyoutBackground, FlyoutItems and a Shell.FlyoutFooter. The Shell.FlyoutBackground has a LinearGradientBrush that defines a gradient from Gray200 to White like the following:

<Shell.FlyoutBackground>
    <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
        <GradientStop Color="{StaticResource Gray200}" Offset="0.0" />
        <GradientStop Color="White" Offset="0.5" />
    </LinearGradientBrush>
</Shell.FlyoutBackground>

Unfortunately, this is not always working and in this case the gradient is either not calculated correctly and it is just white, or it is not aligned properly.

In the screenshot here, it looks like it is an alignment issue:

The problem is, that this is not always the case and therefore exactely reproducible why it happens.

I mostly got it in my Appium Tests where I compare Screenshots to Reference Screenshots. There, I sometimes get red tests and can see that there is an issue on iOS. So far, I could just see it on iOS.

I usually work with Simulator iPhone 16 Pro Max iOS 18.2 if this is relevant.

Steps to Reproduce

1. Open the Example Project
2. Execute on iPhone 16 Pro Max iOS 18.2 and if possible use an Appium Test that opens the Flyout Menu (at least when doing this, I could very often see the issue)
3. Sometimes you will see the LinearGradientBrush in the Shell.FlyoutBackground not calculated correctly and it gets not aligned correctly as can be seen in the following screenshot

From the past, I know that have been some issues with LinearGradients within Flyouts, but I think it was working in a previous version. Just found out that this causes a red test previously when I compared Screenshots with reference Screenshots in newly implemented Tests.

Additional information: Steps to reproduce - 2025-04-05:

1. Start iPhone Simulator in Landscape orientation
2. Switch to Portrait orientation
3. Open Flyout menu.

First of all, I thought, I need to open the the Flyout menu first in Landscape orientation, then switch to Portrait and open it again. But, it already leads to a wrong calculation when the iPhone Simulator is just started in Landscape orientation. That's alreay sufficient to get this effect

Link to public reproduction project repository

FlyoutBackgroundGradientIssueApp_27822

Version with bug

9.0.40 SR4
9.0.50 SR5

Is this a regression from previous behavior?

Not sure, did not test other versions

Last version that worked well

Unknown/Other

Affected platforms

iOS

Affected platform versions

iPhone 16 Pro Max iOS 18.2

Did you find any workaround?

Not so far, but if you have any tips and trick what I could try, please let me know!

Relevant log output