Content page styles are not loaded on first page navigation on iOS

Description

I have created a style for my MAUI app pages. It works fine on Android. On iOS it doesn’t load the style on initial page load. If i navigate away from the page and then navigate back style is loaded.

Application uses Shell with Tabs for navigation.

Steps to Reproduce

1. Create a new MAUI Application
2. Create second app page
3. Add Tab navigation

<?xml version="1.0" encoding="UTF-8" ?>
<Shell
    x:Class="StylesLoadBugRepro.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:StylesLoadBugRepro"
    Shell.FlyoutBehavior="Disabled">

    <TabBar>
        <ShellContent
            Title="Home"
            ContentTemplate="{DataTemplate local:MainPage}"
            Route="MainPage" />
        <ShellContent
            Title="Other"
            ContentTemplate="{DataTemplate local:OtherPage}"
            Route="OtherPage" />
    </TabBar>
    
</Shell>

1. Create brush for your background in `Resources/Styles/Colors.xaml’:

    <Color x:Key="PageBackgroundGradientStart">#0C5A56</Color>
    <Color x:Key="PageBackgroundGradientEnd">#031E17</Color>
    <LinearGradientBrush x:Key="PageBackgroundBrush"
                         EndPoint="0,1">
        <GradientStop Color="{StaticResource PageBackgroundGradientStart}"
                          Offset="0.9" />
        <GradientStop Color="{StaticResource PageBackgroundGradientEnd}"
                          Offset="1.0" />
    </LinearGradientBrush>

1. Change page style in Resources/Styles/Styles.xaml:

    <Style TargetType="Page" ApplyToDerivedTypes="True">
        <Setter Property="Padding" Value="0"/>
        <Setter Property="Background" Value="{StaticResource PageBackgroundBrush}" />
    </Style>

1. Run the application.

Expected: page background is custom. Actual: page background is default color (Black or White depending on app theme)

1. Switch to another tab
2. Switch back to the home page

Now page background is customized.

Note: i tried to put Background directly into ContentPage instead of Styles but it doesn’t work either.

Link to public reproduction project repository

https://github.com/MichaelSL/NET-MAUI-iOS-Style-load-bug-repro

Version with bug

7.0 (current)

Last version that worked well

Unknown/Other

Affected platforms

iOS

Affected platform versions

iOS 16

Did you find any workaround?

No, no workaround yet.

Relevant log output

2023-04-19 16:58:19.212346-0600 StylesLoadBugRepro[3363:21410] SecTaskLoadEntitlements failed error=22 cs_flags=200, pid=3363
2023-04-19 16:58:19.213907-0600 StylesLoadBugRepro[3363:21410] SecTaskCopyDebugDescription: StylesLoadBugRep[3363]/0#-1 LF=0
2023-04-19 16:58:19.305542-0600 StylesLoadBugRepro[3363:21410] SecTaskLoadEntitlements failed error=22 cs_flags=200, pid=3363
2023-04-19 16:58:19.305665-0600 StylesLoadBugRepro[3363:21410] SecTaskCopyDebugDescription: StylesLoadBugRep[3363]/0#-1 LF=0
Thread started:  #2
Thread started:  #3
Thread started:  #4
Loaded assembly: /Users/michael/Library/Developer/CoreSimulator/Devices/97A00BCF-B417-47FB-A7F3-004384900EFE/data/Containers/Bundle/Application/17ECE94D-F3A4-41DF-B8BB-09B9AE6B08B2/StylesLoadBugRepro.app/System.Runtime.Serialization.Json.dll [External]
Loaded assembly: /Users/michael/Library/Developer/CoreSimulator/Devices/97A00BCF-B417-47FB-A7F3-004384900EFE/data/Containers/Bundle/Application/17ECE94D-F3A4-41DF-B8BB-09B9AE6B08B2/StylesLoadBugRepro.app/System.Private.DataContractSerialization.dll [External]
Loaded assembly: /Users/michael/Library/Developer/CoreSimulator/Devices/97A00BCF-B417-47FB-A7F3-004384900EFE/data/Containers/Bundle/Application/17ECE94D-F3A4-41DF-B8BB-09B9AE6B08B2/StylesLoadBugRepro.app/System.Runtime.Serialization.Xml.dll [External]
Loaded assembly: /Users/michael/Library/Developer/CoreSimulator/Devices/97A00BCF-B417-47FB-A7F3-004384900EFE/data/Containers/Bundle/Application/17ECE94D-F3A4-41DF-B8BB-09B9AE6B08B2/StylesLoadBugRepro.app/System.Runtime.Serialization.Primitives.dll [External]
2023-04-19 16:58:20.255065-0600 StylesLoadBugRepro[3363:21850] SecTaskLoadEntitlements failed error=22 cs_flags=200, pid=3363
2023-04-19 16:58:20.255220-0600 StylesLoadBugRepro[3363:21850] SecTaskCopyDebugDescription: StylesLoadBugRep[3363]/0#-1 LF=0
2023-04-19 16:58:20.482580-0600 StylesLoadBugRepro[3363:21410] [TableView] Warning once only: UITableView was told to layout its visible cells and other contents without being in the view hierarchy (the table view or one of its superviews has not been added to a window). This may cause bugs by forcing views inside the table view to load and perform layout without accurate information (e.g. table view bounds, trait collection, layout margins, safe area insets, etc), and will also cause unnecessary performance overhead due to extra layout passes. Make a symbolic breakpoint at UITableViewAlertForLayoutOutsideViewHierarchy to catch this in the debugger and see what caused this to occur, so you can avoid this action altogether if possible, or defer it until the table view has been added to a window. Table view: <_UIMoreListTableView: 0x7fe0b3a2d600; frame = (0 0; 0 0); clipsToBounds = YES; gestureRecognizers = <NSArray: 0x600003a30c30>; backgroundColor = <UIDynamicSystemColor: 0x6000021339c0; name = tableBackgroun
dColor>; layer = <CALayer: 0x6000030dfa40>; contentOffset: {0, 0}; contentSize: {0, 0}; adjustedContentInset: {0, 0, 0, 0}; dataSource: <UIMoreListController: 0x7fe0acf70770>>
2023-04-19 16:58:20.865231-0600 StylesLoadBugRepro[3363:21410] SecTaskLoadEntitlements failed error=22 cs_flags=200, pid=3363
2023-04-19 16:58:20.865453-0600 StylesLoadBugRepro[3363:21410] SecTaskCopyDebugDescription: StylesLoadBugRep[3363]/0#-1 LF=0
Thread started: .NET Timer #5
Thread started: <Thread Pool> #6
Thread started: .NET ThreadPool Gate #7
Thread started: <Thread Pool> #8
Loaded assembly: /Users/michael/Library/Developer/CoreSimulator/Devices/97A00BCF-B417-47FB-A7F3-004384900EFE/data/Containers/Bundle/Application/17ECE94D-F3A4-41DF-B8BB-09B9AE6B08B2/StylesLoadBugRepro.app/System.Runtime.Intrinsics.dll [External]
2023-04-19 16:58:24.318471-0600 StylesLoadBugRepro[3363:21808] Warning: observer object was not disposed manually with Dispose()
2023-04-19 16:58:24.318668-0600 StylesLoadBugRepro[3363:21808] Warning: observer object was not disposed manually with Dispose()
Loaded assembly: /Users/michael/Library/Developer/CoreSimulator/Devices/97A00BCF-B417-47FB-A7F3-004384900EFE/data/Containers/Bundle/Application/17ECE94D-F3A4-41DF-B8BB-09B9AE6B08B2/StylesLoadBugRepro.app/System.Xml.XmlSerializer.dll [External]
Thread started: <Thread Pool> #9
Thread started: <Thread Pool> #10
Thread finished: <Thread Pool> #8
Thread finished: <Thread Pool> #6
The thread 0x8 has exited with code 0 (0x0).
The thread 0x6 has exited with code 0 (0x0).
[0:] Microsoft.Maui.Controls.Element: Warning: Microsoft.Maui.Controls.LinearGradientBrush is already a child of StylesLoadBugRepro.MainPage. Remove Microsoft.Maui.Controls.LinearGradientBrush from StylesLoadBugRepro.MainPage before adding to StylesLoadBugRepro.OtherPage.
Thread started: <Thread Pool> #11
2023-04-19 16:59:35.245880-0600 StylesLoadBugRepro[3363:21808] Warning: observer object was not disposed manually with Dispose()
2023-04-19 16:59:35.246006-0600 StylesLoadBugRepro[3363:21808] Warning: observer object was not disposed manually with Dispose()
2023-04-19 16:59:41.729760-0600 StylesLoadBugRepro[3363:21758] [client] Timed out waiting for the exit barrier block. activeSendTransactions=0

[LanceMcCarthy]

I just landed on a bug that is the root cause of this. The problem is the missing Tab items from the implicit conversation

Does not work:

<?xml version="1.0" encoding="UTF-8" ?>
<Shell x:Class="RPS.UI.AppShell"
       xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:views="clr-namespace:RPS.UI.Views"
       Shell.FlyoutBehavior="Disabled">

    <TabBar>
            <ShellContent Title="Notes"
                          ContentTemplate="{DataTemplate views:BacklogPage}"/>

            <ShellContent Title="About"
                          ContentTemplate="{DataTemplate views:AboutPage}" />
    </TabBar>
</Shell>

Works:

<?xml version="1.0" encoding="UTF-8" ?>
<Shell x:Class="RPS.UI.AppShell"
       xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:views="clr-namespace:RPS.UI.Views"
       Shell.FlyoutBehavior="Disabled">

    <TabBar>
        <Tab>
            <ShellContent Title="Notes"
                          ContentTemplate="{DataTemplate views:BacklogPage}"/>
        </Tab>
        <Tab>
            <ShellContent Title="About"
                          ContentTemplate="{DataTemplate views:AboutPage}" />
        </Tab>
    </TabBar>
</Shell>

[Adelzu]

Found a clumsy workaround. add the following to your ContentPage tag

xmlns:ios="clr-namespace:Microsoft.Maui.Controls.PlatformConfiguration.iOSSpecific;assembly=Microsoft.Maui.Controls"
ios:Page.UseSafeArea="False"

Then add a Grid with the LinearGradientBrush as your root container in the page.

<Grid>
        <Grid.Background>
            <LinearGradientBrush StartPoint="0,0" EndPoint="0.5,1.5"  >
                <GradientStop Color="#abcabc"
                                      Offset="0.2" />
                <GradientStop Color="#cbacba"
                                      Offset="1.0" />
            </LinearGradientBrush>
        </Grid.Background>
        <!--Add your controls here-->
</Grid>