Drawing of Borders lags behind other elements on iOS creating bizarre overlaps and glitches (okay in Windows/Android)

[jonmdev]

Description

Currently, whenever a Border is resized in iOS it lags behind other elements by a large margin creating strange visual overlaps and effects.

This is likely the same overlap phenomenon seen here, which indicates the overlap/lag phenomenon is due to Borders, not Editor: #17757

That thread is more relevant therefore for the other strange Editor bugs like the textfield scrolling itself off the screen, unless perhaps these are all related and caused by the same thing.

DEMO PROJECT
This is the same project used to demonstrate the Android Shadow bug here: #18202

It draws 3 purple borders on screen and then oscillates their height continuously.

Correct animation should look like this:

Nothing should overlap at any time. However, in iOS we get the following bizarre overlaps as the animated Borders lag behind everything else and desynchronize in how they are drawn:

Steps to Reproduce

1. Open demo project.
2. Play in Windows/Android and see the Border elements all remain in sync.
3. Play in iOS and observe that nothing is staying in sync as the Border elements seem to lag behind where they should be drawn.

Link to public reproduction project repository

https://github.com/jonmdev/Resize-Lag-Bug

Version with bug

8.0.0-rc.2.9373

Is this a regression from previous behavior?

No, this is something new

Affected platforms

iOS

[XamlTest]

Verified this on Visual Studio Enterprise 17.8.0 Preview 4.0(8.0.0-rc.2.9373). Repro on iOS 16.4, not repro on Windows 11 and Android 13.0-API33 with below Project:
ResizeLagBug.zip

[ghost]

We've added this issue to our backlog, and we will work to address it as time and resources allow. If you have any additional information or questions about this issue, please leave a comment. For additional info about issue management, please read our Triage Process.

[jonmdev]

I suspect this is due to iOS animation that needs to be disabled on changing requested View size:

https://stackoverflow.com/questions/10975449/changing-uiviews-transformation-rotation-scale-without-animation
https://stackoverflow.com/questions/13709634/resizing-a-uiview-without-animation?rq=3

[albyrock87]

It took me a lot of time to find a workaround, but here it is. I hope this also helps fixing the issue.

handlers.AddHandler<Border, NotAnimatedBorderHandler>();

The following workaround removes sizing animations but keeps other kind of animations which are good (i.e. background).

using Microsoft.Maui.Handlers;
using Microsoft.Maui.Platform;
using ContentView = Microsoft.Maui.Platform.ContentView;

namespace YourNamespace;

public class NotAnimatedBorderHandler : BorderHandler
{
    private class BorderContentView : ContentView
    {
        public override void LayoutSubviews()
        {
            // This is the only workaround I found to avoid the animation when the border size is updated.
            // https://github.com/dotnet/maui/issues/15363
            // https://github.com/dotnet/maui/issues/18204

            if (Layer.Sublayers?.FirstOrDefault(layer => layer is MauiCALayer) is { AnimationKeys: not null } caLayer)
            {
                caLayer.RemoveAnimation("bounds");
                caLayer.RemoveAnimation("position");
            }

            base.LayoutSubviews();
        }
    }
    
    protected override ContentView CreatePlatformView()
    {
        _ = VirtualView ?? throw new InvalidOperationException($"{nameof(VirtualView)} must be set to create a {nameof(ContentView)}");
        _ = MauiContext ?? throw new InvalidOperationException($"{nameof(MauiContext)} cannot be null");
    
        return new BorderContentView
               {
                   CrossPlatformLayout = VirtualView
               };
    }
}

Please note that setting Frame property (and probably also other things - happens for example on MapStrokeShape) implicitly re-adds animation keys, that's why I'm removing them every time.

CC @durandt

[durandt]

Related #15363 (I see now it was closed during Fall, but from my latest tests on net8 the animation still existed)
Thanks @albyrock87 , I will make sure to try this next week ! Are you on net7 or net8 ?
I will make sure to test again whether the fix was really fixed in net8 (I've successfully upgraded a couple of weeks ago but haven't had time to do all tests and release yet)

[albyrock87]

@durandt I am on .NET MAUI 8.0.3 and I can confirm what they did to prevent this issue is NOT effective, my workaround appears the only way to get around it.
When I have time I'll try to make a PR to fix the issue in one of the following SR releases.

[durandt]

@albyrock87 Now with Maui 8.0.6/8.0.7 removing a few blocking bugs I have finally had time to upgrade and test my app. As you say, the Border animations seem even worse but your work-around seems to work well for me too! Thank you.

[jonmdev]

Thank you very much @albyrock87!!! I finally worked up the courage to test your fix and it did work as you suggested. It was my first time adding a custom Handler.

I have one question as I am very curious about how this works in terms of the custom Handler.

When you add the custom Handler in MauiProgram.cs, does this automatically replace the standard Border Handler inside Maui? Or is it a second Handler now attached to Border? Ie. Would each Border with this method now have two Handlers? One standard BorderHandler and one NotAnimatedBorderHandler? Or does the command addHandler check for duplicate handlers of a given type (Border) and use the one we added in exclusion to the default Maui one for Border type?

Obviously your NotAnimatedBorderHandler inherits from BorderHandler so we don't need BorderHandler anymore. I am just wondering if this is automatically dealt with in Maui or if this method is then adding two handlers per Border.

Thanks for any clarification. This is a nice relatively easy technique to customize Handlers if it doesn't just add a duplicate Handler which would be less ideal. (All commands may run twice if two handlers per Border now, if that is even possible?)

Thanks for any clarification.

---

For anyone who has never done this before, this is how I used it (more specific instructions for amateurs like me who have to figure it out 😊).

1) MauiProgram.cs

Add to default builder string so it reads:

        public static MauiApp CreateMauiApp() {
            var builder = MauiApp.CreateBuilder();
            builder
                .UseMauiApp<App>()
                .ConfigureFonts(fonts => {
                    fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
                    fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
                })
                .ConfigureMauiHandlers((handlers) => {
#if IOS
                    handlers.AddHandler<Border, NotAnimatedBorderHandler>();
#endif
                });

#if DEBUG
            builder.Logging.AddDebug();
#endif

            return builder.Build();
        }

2) NotAnimatedBorderHandler.cs

Create a file by this name and enter in its body within the namespace:

using Microsoft.Maui.Handlers;
using Microsoft.Maui.Platform;
#if IOS
using ContentView = Microsoft.Maui.Platform.ContentView;
#endif 

namespace YOUR_NAMESPACE {

    public class NotAnimatedBorderHandler : BorderHandler {
#if IOS
        private class BorderContentView : ContentView {
            public override void LayoutSubviews() {

                if (Layer.Sublayers?.FirstOrDefault(layer => layer is MauiCALayer) is { AnimationKeys: not null } caLayer) {
                    caLayer.RemoveAnimation("bounds");
                    caLayer.RemoveAnimation("position");
                }

                base.LayoutSubviews();
            }
        }

        protected override ContentView CreatePlatformView() {
            _ = VirtualView ?? throw new InvalidOperationException($"{nameof(VirtualView)} must be set to create a {nameof(ContentView)}");
            _ = MauiContext ?? throw new InvalidOperationException($"{nameof(MauiContext)} cannot be null");

            return new BorderContentView {
                CrossPlatformLayout = VirtualView
            };
        }
#endif
    }
}

[albyrock87]

@jonmdev I can confirm it replaces the default handler! :)
Especially because there can be only one handler instance on a view.

And btw, you can place iOS specific handler in Platforms/iOS folder so that you can avoid compilation flags (at least on the handler definition).

[zeniya-takeshi]

I've found a related issue.
#21643

[MarMarIV]

I tried to use the mentioned workaround with handler, but it doesn't work (v. 8.0.20)

[matheusouz]

When i was working with .NET Maui 6.0 this workaround fixed the issue, but now the workaround dont work anymore. We are in 8.0.21 version.

[albyrock87]

@matheusouz have you tried the one above?
#18204 (comment)

[matheusouz]

Yes i tried too but no lucky.

[jonmdev]

@albilaga I have posted the new "1 frame lag on redraw" bug report here:

#23070

I used your test project and another one I made combined into one to show the issue, as your test project and gif best showed the square border effect which I am also seeing my real projects but had trouble figuring out how to reproduce consistently.

My project in there shows there is a redraw lag also on the background color. Likely this is all the same bug and the order of operations must be changed on Border redraw to get them to redraw immediately when needed rather than after 1 frame to fix both.

If anyone has any understanding of the Border and can think of any way to fix it that would be great also. I looked at BorderHandler and Border code and I can't see how it really works to understand a fix.

One problem down, one more to go.

Also just for reference the simplest NotAnimatedBorderHandler.cs code I have tested and works is:

using Microsoft.Maui.Handlers;
using Microsoft.Maui.Platform;

#if IOS
using UIKit;
using ContentView = Microsoft.Maui.Platform.ContentView;
using Foundation;
using CoreAnimation;
#endif 

namespace iOSBorderShadowAnimationBug {

    //TEMP BUG FIX FOR: https://github.com/dotnet/maui/issues/18204
    public class NotAnimatedBorderHandler : BorderHandler {

#if IOS
        private class BorderContentView : ContentView {
            public override void LayoutSubviews() {

                Layer.RemoveAllAnimations();

                if (Layer.Sublayers != null) {

                    for (int i=0; i < Layer.Sublayers.Count(); i++) {
                        Layer.Sublayers[i].RemoveAllAnimations();
                    }
                }
                
                base.LayoutSubviews();
            }

        }

        protected override ContentView CreatePlatformView() {
            _ = VirtualView ?? throw new InvalidOperationException($"{nameof(VirtualView)} must be set to create a {nameof(ContentView)}");
            _ = MauiContext ?? throw new InvalidOperationException($"{nameof(MauiContext)} cannot be null");

            return new BorderContentView {
                CrossPlatformLayout = VirtualView
            };
        }
#endif
    }
}

[samhouts]

We agree that this is an important issue. As our roadmap indicates, for the near future, we are focused on:

• Issues impacting Xamarin.Forms upgrades to .NET MAUI
• CollectionView
• Layout

I am marking this as a p/2 issue because it does not meet our focus areas right now, but we are constantly revisiting the backlog for important issues to address as time allows. Thank you for your patience and understanding!