Border on iOS redraws with 1 frame lag, creating flashes of (1) square corners on redraws, and (2) old background color before new color update

[jonmdev]

Description

In iOS, when Maui must redraw a Border, it does so with a 1 frame lag which is evident in two ways:

1. The Border is sometimes re-drawn briefly fully square, causing a flash of a square over the corners (rather than the round corners expected)
2. The old background color is still visible on update when it is changed for one frame, causing a visual flash of the old color each time

Steps to Reproduce

Reproduction project contains TWO reproduction demonstrations (one for each redraw problem, although they are likely the same underlying issue). To toggle between these projects, open App.xaml.cs and set TestProject here:

 enum TestProjects {
     testProject1, //==> DEMONSTRATES FLASH AT CORNERS OF LOWER SCREEN "HELLO" BORDER
                   //AS BORDER IS INITIALLY DRAWN SQUARE (RATHER THAN ROUND) ON THE FIRST "CLICK ME" BUTTON CLICK

     testProject2 //==> DEMONSTRATES FLASH OF PRIOR COLOR ON EACH UPDATE
                  //AS EACH TIME BORDER IS REDRAWN THE COLORATION LAGS ONE FRAME
 }
 public App() {

     //=================================
     //SET WHICH TEST PROJECT HERE
     //=================================
     TestProjects testProject = TestProjects.testProject1;
     //=================================

1) TestProject1

This shows a button on screen like this, which when clicked will alter the bottom Border. The bottom Border will flash on the first click made, creating the single frame square border effect shown on the "HELLO" border here:

2) TestProject2

This shows a Border on screen which is automatically toggled by a timer visible or invisible. Each time the background color changes. However, you will see on each update the old color still flashes momentarily before the new one replaces it.

Notes:

Note that the slowest method of building (eg. Debug to device or simulator) is preferred to see the flashes for as long as possible so it is obvious to the eye.

Please note this is also NOT an animation effect - it is a 1 frame drawing lag which is separate from other issues, as animations in test project have been successfully removed by NotAnimatedBorderHandler.cs as per: #18204

@jsuarezruiz I know you were able to fix some of the Windows/Android Border drawing bugs previously reported and it has been appreciated. Any suggestions on a fix or workaround for this one for iOS? Thanks for any help.

Link to public reproduction project repository

https://github.com/jonmdev/iOSBorderShadowAnimationBug

Version with bug

8.0.40 SR5

Is this a regression from previous behavior?

No, this is something new

Last version that worked well

Unknown/Other

Affected platforms

iOS

[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:

• Drawing of Borders lags behind other elements on iOS creating bizarre overlaps and glitches (okay in Windows/Android) (#18204), similarity score: 0.83
• Border has an unexpected background animation (#21643), similarity score: 0.83

Closed similar issues:

• iOS Border crops/masks underlying elements wrong with clearly abnormal visual effect (iOS only) - repro project included (#17998), similarity score: 0.84
• Border size changes appear to be animated on iOS/MacCatalyst (#15363), similarity score: 0.84
• Nested Border renders top left corner bizarrely wrong with truncation in iOS/Windows (okay in Android) (#17761), similarity score: 0.82

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

[kevinxufei]

Verified this issue with Visual Studio 17.11.0 Preview 2.0 (8.0.60 & 8.0.40 & 8.0.21). Can repro on iOS platform with sample project.
iOSBorderShadowAnimationBug-main.zip

[thisisthekap]

We verified that issue as well. This is one of the main blockers in our effort to migrate to maui.

[thisisthekap]

@jonmdev Were you able to implement a workaround in the meantime?

[albyrock87]

May you verify if this issue persists with the latest commit on main?
https://github.com/dotnet/maui/wiki/Nightly-Builds

[albilaga]

@albyrock87 still the same issue https://github.com/albilaga/MauiBorderIssue

[jonmdev]

@jonmdev Were you able to implement a workaround in the meantime?

I am not aware of any workaround. It would be great to have one. I believe the two biggest remaining Maui glitches in iOS are:

1. This Border redraw bug. Makes corners of Borders constantly flicker (which is unsettling as a user) and redraw sometimes lags behind other objects by one frame causing momentary alignment glitch issues.

2. Editor is broken in iOS as per: [iOS] Editor autoscrolls its text view completely off the screen if you press 'return' too many times, has no constraint against scrolling the text view off screen. Objects lag in resizing around it. #17757 - but that one is currently marked p/2 and on the work list for .NET 8 service so hopefully it will be fixed soon.

If we could get solutions for these two we could at least theoretically build basic working iOS apps in Maui from the simple components which would be great.