[BUG] SKGLView doesn't repaint if it's in a TabBar

[noelbk]

Description

SKGLView doesn't repaint if it's in a TabBar.

Code

AppShell.xaml - puts the MainPage with the MySKGLView in a tab bar. When the tabs switch, the MySKGLView doesn't redraw

    <TabBar x:Name="SKGLViewTabs">
        <Tab Title="Tab1">
            <ShellContent
                Title="Home"
                ContentTemplate="{DataTemplate local:MainPage}"
                Route="MainPage" />
        </Tab>
        <Tab Title="Tab2">
        ...
        </Tab>
    </TabBar>

MainPage.xaml - contains the MySKGLView

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:TestTabsMauiApp2"
             x:Class="TestTabsMauiApp2.MainPage">

    <ScrollView>
        <VerticalStackLayout
            Spacing="25"
            Padding="30,0"
            VerticalOptions="Center">

            <local:MySKGLView
                x:Name="MySKGLView1"
                SemanticProperties.Description="MySKGLView"
                HeightRequest="200"
                HorizontalOptions="Center"
            />
...

MySKGLView.cs - this draws a gradient filled rectangle usually

public class MySKGLView : SKGLView
{
    protected override void OnPaintSurface(SKPaintGLSurfaceEventArgs e)
    {
        base.OnPaintSurface(e);
        SKCanvas canvas = e.Surface.Canvas;
        canvas.Clear();
        SKRectI rect = new SKRectI(0, 0, (int)CanvasSize.Width, (int)CanvasSize.Height);

        // Create linear gradient from upper-left to lower-right
        using SKPaint paint = new SKPaint();
        paint.Shader = SKShader.CreateLinearGradient(
                            new SKPoint(rect.Left, rect.Top),
                            new SKPoint(rect.Right, rect.Bottom),
                            new SKColor[] { SKColors.Red, SKColors.Blue },
                            new float[] { 0, 1 },
                            SKShaderTileMode.Repeat);

        // Draw the gradient on the rectangle
        canvas.DrawRect(rect, paint);
    }
}

Expected Behavior

1. Click Tab1, the SKGLView draws
2. Click Tab2, the second tab draws
3. Click back to Tab1, the SKGLView is blank. It should redraw [BUG]

Basic Information

• Version with issue: SkiaSharp.Views.Maui.Controls.Compatibility 2.88.3
• Last known good version: No previous version tested
• IDE: Microsoft Visual Studio Community 2022 (64-bit) Version 17.6.5
• Platform Target Frameworks:
  • Android: Android SDK Platform 33, Android 12.0 - S
• Target Devices:
  • Android Emulator 32.1.14
  • Google Pixel 5 - API 31

Screenshots

Reproduction Link

TestTabsMauiApp2.zip

[noelbk]

Ooops! I didn't realize this is for the mono SkiaSharp implementation, not Microsoft. I was kind of surprised to find MS on github. I'll close this bug and look for the MS repo.

[noelbk]

Fixed by hack: toggle IsVisible in container's OnAppearing

[janusw]

I was kind of surprised to find MS on github.

GitHub is owned by Microsoft! 😆

[janusw]

I can reproduce this issue with .NET 8 (MAUI 8.0.61 and SkiaSharp 2.88.8). Unfortunately it also affects Mapsui.

Fixed by hack: toggle IsVisible in container's OnAppearing

Gladly I can also confirm this workaround :)

[albilaga]

This is happen to me also and not even in a TabBar. We just have content page as usual. And this is only happen on Android. And thank you @noelbk for the workaround. It works for now :D

[thisisthekap]

Even though there is a workaround, it would be much appreciated to have an official fix for this issue. This hack is not a sustainable solution and having a proper fix would ensure better reliability. Moreover, this issue might be a symptom of something even more severe, so addressing it promptly would be beneficial.

@mattleibow What do you think?

[SimonvBez]

This issue happens when a new rendering thread is created for an SKGLView which already has had its layout (size/position) set.

The cause lies in SkiaSharp.Views.Android.GLTextureView.OnAttachToWindow() creating a new GLThread when the Tab with the SKGLView comes on the screen for a second time, without telling the thread what the size of the View is.
This makes the GLThread assume the View has a width and height of 0, causing nothing to be rendered.
And since the View has already been created and had its size/position set by the previous time the Tab came into view, GLTextureView.OnSurfaceTextureSizeChanged() (which currently is responsible for setting the width/height in the GLThread) is never called.

That's also exactly why toggling the IsVisible property off and on works! It will call GLTextureView.OnLayoutChange() with the correct width and height, enabling the GLThread to receive the actual width and height of the View.

The solution should be simple, which is to pass the View's width and height to the GLThread when it gets constructed, instead of assuming a size of (0, 0).