Flyout is blocked by Webbrowser

[topvis]

As shown in the image below, Flyout (flying out from the right side of the window) is blocked by the Webbrower control. I guess same thing would happen for controls hosted by WindowsFormHost.

Here is the XAML code:

xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
xmlns:behaviours="clr-namespace:MahApps.Metro.Behaviours;assembly=MahApps.Metro"

<i:Interaction.Behaviors>
    <behaviours:BorderlessWindowBehavior ResizeWithGrip="True" AllowsTransparency="False" />
</i:Interaction.Behaviors>

<metro:MetroWindow.Flyouts>
    <metro:FlyoutsControl>
        <metro:Flyout x:Name="aboutFlyout" Width="500" Header="About" Position="Right">
            <TextBlock Text="Apllication Name" />
        </metro:Flyout>
    </metro:FlyoutsControl>
</metro:MetroWindow.Flyouts>

<Grid Background="LightGreen">
    <WebBrowser Source="http://www.google.com" Margin="50"/>
    <Button Content="Show Flyout" Width="100" Height="25" HorizontalAlignment="Left" VerticalAlignment="Bottom" Margin="10" Click="Button_Click_1"/>
</Grid>

[AzureKitsune]

This is the airspace issue. It's a WPF issue, not a MahApps.Metro one. Please refer to #488 for the Airspace Decorator workaround.