[iOS] Border often has wrong initial bounds

[borrmann]

Description

reopening issue #20381

Steps to Reproduce

No response

Link to public reproduction project repository

https://github.com/borrmann/BorderDrawingIssue

Version with bug

8.0.61 SR6.1

Is this a regression from previous behavior?

Yes, this used to work in .NET MAUI

Last version that worked well

8.0.14

Affected platforms

iOS

Affected platform versions

No response

Did you find any workaround?

no

Relevant log output

No response

[github-actions]

Hi I'm an AI powered bot that finds similar issues based off the issue title.

Please view the issues below to see if they solve your problem, and if the issue describes your problem please consider closing this one and thumbs upping the other issue to help us prioritize it. Thank you!

Open similar issues:

• [macOS/iOS] Border clipping incorrect when Content is scaled (or has any other Transform applied?) (#17560), similarity score: 0.81
• Border has an unexpected background animation (#21643), similarity score: 0.79
• [Windows] Issues with BoxView Placement Inside Border (#19668), similarity score: 0.79

Closed similar issues:

• iOS Border crops/masks underlying elements wrong with clearly abnormal visual effect (iOS only) - repro project included (#17998), similarity score: 0.81
• iOS, Android Border calculates it's size in a wrong way (#17275), similarity score: 0.81

Note: You can give me feedback by thumbs upping or thumbs downing this comment.

[Zhanglirong-Winnie]

This issue has been verified using Visual Studio 17.11.0 Preview 2.1(8.0.61 & 8.0.40). Can repro on iOS platform.

[jonmdev]

What you are seeing is a combination of these two bugs:

#18204

#23070

You can solve the animation which is the main problem with the NotAnimatedBorderHandler implementation in the first bug thread.

The other has no solution yet.

[albyrock87]

@borrmann the animation issue fix has been released in the latest SR

[IeuanWalker]

@albyrock87 I'm experiencing this in the latest version, 8.0.70

[jonmdev]

@albyrock87 re: the animation bug I think you should have used the approach I wrote here rather than just removing it from one layer:

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
    }
}

I don't know much about iOS animations and my hat is off to you for coming up with the solution, but this removes animations from everything in case it is a multilayer element. I would be suprprised if anyone had any more animations after that.

Edit: Oh never mind I see you did do something similar to that as well here: https://github.com/dotnet/maui/pull/23156/files#diff-fe6d138a657c96dcb93e2a6bbc458c3fec125cf61417747a9029e971b06cd08a

Not sure why it's not working then.

[maonaoda]

@jonmdev

@albyrock87 re: the animation bug I think you should have used the approach I wrote here rather than just removing it from one layer:

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
    }
}

I don't know much about iOS animations and my hat is off to you for coming up with the solution, but this removes animations from everything in case it is a multilayer element. I would be suprprised if anyone had any more animations after that.

Edit: Oh never mind I see you did do something similar to that as well here: https://github.com/dotnet/maui/pull/23156/files#diff-fe6d138a657c96dcb93e2a6bbc458c3fec125cf61417747a9029e971b06cd08a

Not sure why it's not working then.

Nice ideal, It fixed #23620
This means that #23156 is ​​still insufficient.

[maonaoda]

@jonmdev
As a temporary workaround, I suggest directly replacing the BorderHandler`s creation method like this

BorderHandler.PlatformViewFactory = (h) => new NoneAnimatedBorderContentView() { CrossPlatformLayout = h.VirtualView };

[albyrock87]

@jonmdev my understanding is that the remaining 1 frame issue is due to the change on IsVisible.

I think it might be due to the order of changes.
Probably the visibility of the layer is changing before applying the changes to the background.

[maonaoda]

Yes, that is IsVisible like #23620

[jonmdev]

@jonmdev my understanding is that the remaining 1 frame issue is due to the change on IsVisible.

I think it might be due to the order of changes. Probably the visibility of the layer is changing before applying the changes to the background.

Unfortunately it occurs not just when isVisible is toggled. It happens constantly in my real app all over the place. Using IsVisible is just the easiest way I found to reproduce it.

[PureWeen]

@Zhanglirong-Winnie can you verify which .NET 8 version of MAUI this broke on

[Zhanglirong-Winnie]

@Zhanglirong-Winnie can you verify which .NET 8 version of MAUI this broke on

Hi, @PureWeen
This issue started to occur with 8.0.20, and worked fine with 8.0.14.

[karthikraja-arumugam]

The issue is not replicated with 8.0.90, can you test with latest version?

[dotnet-policy-service]

Hi @borrmann. We have added the "s/try-latest-version" label to this issue, which indicates that we'd like you to try and reproduce this issue on the latest available public version. This can happen because we think that this issue was fixed in a version that has just been released, or the information provided by you indicates that you might be working with an older version.

You can install the latest version by installing the latest Visual Studio (Preview) with the .NET MAUI workload installed. If the issue still persists, please let us know with any additional details and ideally a reproduction project provided through a GitHub repository.

This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time.