Shadows are incredibly slow to draw in Android, dropping app performance to 6 FPS (frames per second)

[jonmdev]

Description

Currently any objects that use Shadows cannot be resized in any reasonable fashion in Android Maui. Even on a high end flagship Samsung 120 Hz device, performance drops to 6-8 fps just trying to redraw a few Border elements on screen with Shadows.

This is certainly not normal or expected behavior. I wonder if it is trying to draw these on the CPU rather than GPU? I am not sure what it could be. I don't know enough about graphics rendering unfortunately.

DEMO PROJECT
My repro project places 4 Borders on the screen and then animates 3 of the Borders with Shadows at a given approximate FPS based on a timer. It is set to 50 fps by default. It is expected this should result in around a 45-48 fps project as Timers may lag a bit based on scheduling.

There is a simple int for the approximate target FPS and bool for adding shadows or not. In Android, a listener is added to the layout event so you can track the exact frames per second on debug output.

It animates 3 purple Border elements with Shadows from small to big and back in an oscillation.

All project code is in App.xaml.cs. The rest is default Maui project.

RESULTS:
You will see on the debug output even with using a high end 120 Hz advanced CPU/GPU flagship top of the line Samsung test Android device, frame rate drops to 6-8 frames per second when the Border elements reach their peak size.

At best, even when they are small we can attain around 30 fps, which is also pretty abysmal and suggests something is wrong.

On Pixel 5 emulator, frame rate drops as low as 3 FPS with Shadows.

I wonder if this is related to this bug though I don't know: #17881

It seems the Shadows are not being drawn in any reasonable or efficient manner.

Steps to Reproduce

1. Open project, press play with virtual or physical Android device attached.
2. See frame rate output which ranges 6-30 FPS at best with Shadows, but can hit the expected 45-48 FPS or so with no trouble without them.
3. On Pixel 5 emulator, frame rate will drop as low as 3 FPS.

Link to public reproduction project repository

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

Version with bug

.NET 7 & .NET 8

Is this a regression from previous behavior?

No, this is something new

Last version that worked well

Unknown/Other

Affected platforms

Android

Did you find any workaround?

Don't use Shadows on Android? Or expect to resize or animate anything that does? Not really great.

Relevant log output

Using high end Android physical device for testing, results are as follows.

1) OUTPUT WITH SHADOWS, TARGETING ~50 FPS:

//=================================
//WHEN SHADOW OBJECTS ARE SMALL
//=================================
[0:] CURRENT FPS 28.842548527587898
[0:] CURRENT FPS 25.603801652469357
[0:] CURRENT FPS 28.190613653278007
[0:] CURRENT FPS 31.757424091817064
[0:] CURRENT FPS 23.399694867978923
[0:] CURRENT FPS 31.193948374015438
[0:] CURRENT FPS 33.59594161025348
[0:] CURRENT FPS 23.0427489077737
[0:] CURRENT FPS 26.84340363620746
[0:] CURRENT FPS 23.07656805279919
[0:] CURRENT FPS 28.753975237076528
[0:] CURRENT FPS 27.488688404721458
[0:] CURRENT FPS 26.46777019623205
[0:] CURRENT FPS 21.51092755119601
[0:] CURRENT FPS 24.395360978156397
[0:] CURRENT FPS 20.434102064252993
[0:] CURRENT FPS 20.28751465772934
[0:] CURRENT FPS 16.020942576135525
[0:] CURRENT FPS 25.857365599877955
[0:] CURRENT FPS 20.26954440145049
[0:] CURRENT FPS 20.408954632934744
[0:] CURRENT FPS 20.928032681215836
[0:] CURRENT FPS 21.0176758654028
[0:] CURRENT FPS 21.123919247481503
[0:] CURRENT FPS 20.737207734978483
[0:] CURRENT FPS 17.50945510575711
[0:] CURRENT FPS 15.975589299550288
[0:] CURRENT FPS 14.855838938936559
[0:] CURRENT FPS 12.73685779170907
[0:] CURRENT FPS 14.092923097737241
[0:] CURRENT FPS 13.749805783993303
[0:] CURRENT FPS 10.186847150433247
[0:] CURRENT FPS 12.006906372545489
[0:] CURRENT FPS 11.683293941160596
[0:] CURRENT FPS 10.110978095577053
[0:] CURRENT FPS 9.37268611811459
[0:] CURRENT FPS 8.421407217145985
[0:] CURRENT FPS 9.367979870084856
[0:] CURRENT FPS 7.802734390239715
[0:] CURRENT FPS 7.019016621733263
[0:] CURRENT FPS 8.172859242114416
[0:] CURRENT FPS 6.795394081891295
[0:] CURRENT FPS 6.781054006348422
[0:] CURRENT FPS 6.521668242736492
[0:] CURRENT FPS 6.443328030474364
[0:] CURRENT FPS 6.317574354691367
[0:] CURRENT FPS 6.067059205397255
[0:] CURRENT FPS 6.112454492776301
//=================================
//WHEN SHADOW OBJECTS ARE LARGE
//=================================

2) OUTPUT WITHOUT SHADOWS, TARGETING ~50 FPS (CONSISTENT EXPECTED RESULT)

[0:] CURRENT FPS 48.131302192380815
[0:] CURRENT FPS 43.59121898484769
[0:] CURRENT FPS 46.7525667159127
[0:] CURRENT FPS 46.17039646519445
[0:] CURRENT FPS 44.36025853158672
[0:] CURRENT FPS 44.971106064353656
[0:] CURRENT FPS 45.243750706933604
[0:] CURRENT FPS 45.01361661902726
[0:] CURRENT FPS 43.967639817094614
[0:] CURRENT FPS 45.042001666554064
[0:] CURRENT FPS 45.38770174833427
[0:] CURRENT FPS 45.61357094962894
[0:] CURRENT FPS 44.74112783435045
[0:] CURRENT FPS 43.66621544910702
[0:] CURRENT FPS 45.7331016189518
[0:] CURRENT FPS 46.28493934358699

[drasticactions]

Looking at your code, I'm not sure shadows are the root of the problem.

https://github.com/drasticactions/MauiRepros/tree/main/MauiAnimationTest

demo.mp4

I wrote a sample that dynamically adds borders with shadows to an absolute layout, and rotates the box. To me, this looks fine. I could do more to get exact benchmarks but compared to your sample, it's night and day. I think it has to do with the animation system. I'm using "RotateTo" on the given border to spin it, you're doing direct calculations.

https://github.com/jonmdev/Resize-Lag-Bug/blob/main/Resize%20Lag%20Bug%207/App.xaml.cs

            abs2.SizeChanged += delegate {
                if (lastUpdateDateTime != DateTime.Now) {
                    Debug.WriteLine("CURRENT FPS " + 1 / (DateTime.Now - lastUpdateDateTime).TotalSeconds);
                    lastUpdateDateTime = DateTime.Now;
                }
            };

mainPage.SizeChanged += delegate {
                if (mainPage.Width > 0) {
                    abs.WidthRequest = mainPage.Width;
                    abs.HeightRequest = mainPage.Height;
                    vert.WidthRequest = mainPage.Width;
                    for (int i = 0; i < borders.Count; i++) {
                        borders[i].WidthRequest = mainPage.Width;
                        borders[i].TranslationX = mainPage.Width * i;
                    }
                }
            };

timerUpdateEvent += delegate {
                double sinVal = (Math.Sin(time) + 1) * 0.5;
                double height = 20 + sinVal * 800;
                for (int i = 0; i < borders.Count; i++) {
                    borders[i].HeightRequest = height;
                }
                abs2.HeightRequest = height;
            };

You're running a timer, and directly updating the heights of every view. I believe every action here, including your logging, is happening on the UI Thread. If you look into MAUI Animation you should be able to rewrite your UI above and have it handle the layout for you, without you having to write out the math by hand.

[jonmdev]

Looking at your code, I'm not sure shadows are the root of the problem.

https://github.com/drasticactions/MauiRepros/tree/main/MauiAnimationTest

demo.mp4
I wrote a sample that dynamically adds borders with shadows to an absolute layout, and rotates the box. To me, this looks fine. I could do more to get exact benchmarks but compared to your sample, it's night and day. I think it has to do with the animation system. I'm using "RotateTo" on the given border to spin it, you're doing direct calculations.

https://github.com/jonmdev/Resize-Lag-Bug/blob/main/Resize%20Lag%20Bug%207/App.xaml.cs

            abs2.SizeChanged += delegate {
                if (lastUpdateDateTime != DateTime.Now) {
                    Debug.WriteLine("CURRENT FPS " + 1 / (DateTime.Now - lastUpdateDateTime).TotalSeconds);
                    lastUpdateDateTime = DateTime.Now;
                }
            };

mainPage.SizeChanged += delegate {
                if (mainPage.Width > 0) {
                    abs.WidthRequest = mainPage.Width;
                    abs.HeightRequest = mainPage.Height;
                    vert.WidthRequest = mainPage.Width;
                    for (int i = 0; i < borders.Count; i++) {
                        borders[i].WidthRequest = mainPage.Width;
                        borders[i].TranslationX = mainPage.Width * i;
                    }
                }
            };

timerUpdateEvent += delegate {
                double sinVal = (Math.Sin(time) + 1) * 0.5;
                double height = 20 + sinVal * 800;
                for (int i = 0; i < borders.Count; i++) {
                    borders[i].HeightRequest = height;
                }
                abs2.HeightRequest = height;
            };

You're running a timer, and directly updating the heights of every view. I believe every action here, including your logging, is happening on the UI Thread. If you look into MAUI Animation you should be able to rewrite your UI above and have it handle the layout for you, without you having to write out the math by hand.

Thanks drasticactions but the project was written that way intentionally. Changes like scaling and rotation do not force a full redraw of the layout or object. Changing the height does. That is exactly the point.

If you take off the shadow, it can run this project fine (redraw if at normal speeds). However it takes 150+ ms to redraw a simple shadow and a few visual elements on a top of the line device.

This is not normal and is a bug. I have dealt with other systems where this type of redrawing can be done easily on the same device at 120 fps no problem. That is what should be expected. On Windows this project runs at 180 fps (5 ms per frame) as proven by @jsuarezruiz

This should be easy math and graphics processing. We saw a similar bug in Windows .NET 8 discussed elsewhere and linked above.

Translations, rotation, and scaling are only useful when you are looking to distort or shift something, but yes they are inherently efficient and they work as expected in Maui Android as you demonstrate.

Redrawing Shadows on layout changes does not.

FYI if you look through Maui animations (just right click and view definitions of things to step through it) you will see they actually otherwise operate in the same fashion as I wrote mine. They are just running on Timers as well.

[jonmdev]

@jsuarezruiz I have looked through the code for creating Shadows as best I can find it in Android via Github. It appears this happens here:

maui/src/Compatibility/Core/src/Android/Renderers/BorderDrawable.cs

Line 101 in 0049595

public BorderDrawable SetShadow(float dy, float dx, AColor color, float radius)

Android seems to take Borders as Drawable at their base in Android. Under DrawBackground we have: paint.SetShadowLayer(_shadowRadius, _shadowDx, _shadowDy, _shadowColor); which I think does the work.

This is then using SetShadowLayer from Android. I suspect if this line is commented out the shadows will go away but so will the massive rendering lag.

Besides ensuring hardware accel is on as per here: https://developer.android.com/topic/performance/hardware-accel there may not be then much more to optimize this.

Is that correct @jsuarezruiz?

Also, is there some way I can run Maui with all the source code open to me live in the project so I can quickly step through and find roots or experiment with bugs?

For example, looking at this code:

maui/src/Compatibility/Core/src/Android/Renderers/BorderDrawable.cs

Line 101 in 0049595

public BorderDrawable SetShadow(float dy, float dx, AColor color, float radius)

I would love to quickly try to figure out why Borders are not drawing to their expected sizes as per: #17882

I could do so if I could quickly make some changes to the background Maui code in a live project and re-run but I don't know how I can do this.

Similarly, I could help figure out some of the other bugs that are blocking my projects. It is very tedious trying to figure out what code does by searching on Github rather than right clicking and using Go To Definition.

Any thoughts? Thanks.

[jonmdev]

Also @drasticactions thanks - you gave me workaround idea in any case. If this is just a flaw in the underlying Android function, then the workaround for any object that needs to resize with a shadow would be to create the Shadow in slices (like a 9-PNG) with cropping on parents of shadow pieces and scaling the slices.

This means more objects but as long as don't need to change Shadow parameters won't have to redraw for every resize.

I note Android is terrible at certain other things too like every time you set an Android Bitmap to an Android ImageView it is highly expensive also even if the Bitmap is already loaded so I would need to comment out that line to be sure, but I wouldn't be surprised.

[jonmdev]

Last point: I think from here the issue is far more generalized than just this. Maui Android can't even tween a single object's color at 60 fps. No wonder if can't redraw Shadows at a reasonable speed:

#18245

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.