[BUG] Popup Background Is Not Transparent on iOS for .Net8

[Toine-db]

Current Behavior

Popup content has an extra background that can't be removed.

Expected Behavior

No mysterious background at all, using the views or first content to create backgrounds.

Steps To Reproduce

1. Create new popup with grid as content
2. Set backgroundcolor on grid and margin

Link to public reproduction project repository

https://github.com/Toine-db/random-shares/tree/MAUI-popup-background-issue

Environment

- .NET MAUI CommunityToolkit: 7.0.0
- OS: iOS
- .NET MAUI: iOS 17.0.8478/8.0.100      VS 17.8.34309.116, VS 17.8.34302.71

Anything else?

Used the same setup as previous Popup background issue: https://github.com/CommunityToolkit/Maui/issues/899

[jfversluis]

To be clear, you mean the dark background or the shape with the rounded corners behind it? Does this happen on any other platform besides iOS?

[Toine-db]

To be clear, you mean the dark background or the shape with the rounded corners behind it? Does this happen on any other platform besides iOS?

Yes, the shape in the background with the rounded corners. I only tested it on Android and iOS and Android just works fine. I think it has something to do with an iOS native UIController that is being used.

[wolfkonig]

I am struggling with the same issue

[cat0363]

As a result of testing, the hack to remove UIImageView no longer works on iOS 17. PR #1463 worked until iOS 15.5. In iOS 17, the hierarchy in which shadows are drawn has changed.

I found a solution, so I'll create a new PR.

[cat0363]

Below are the verification results after applying the solution.

In iOS 17, the hierarchy in which shadows are drawn has changed.

[Toine-db]

As a result of testing, the hack to remove UIImageView no longer works on iOS 17. PR #1463 worked until iOS 15.5. In iOS 17, the hierarchy in which shadows are drawn has changed.

I found a solution, so I'll create a new PR.

Great find @cat0363

Just now I was disabling all CALayers and shadows in all popup views just to find out where the visual was comming from....turned out to be something totally different.

May I ask how you found out it was the image somewhere? Do you happen to use an iOS treeview inspector or something? because the treeview in Visual Studio doesnt provide much insight into the native views.

FYI: I can confirm this solution works, but I could not determine why you are using a different approach for (VirtualView?.Color == Colors.Transparent)

[cat0363]

@Toine-db , Remembering when I deleted the shadow that was UIImageView in PR #1463, I searched the View hierarchy in the debugger and found that the UIImageView was in a different hierarchy than before. I used Visual Studio's watch function.

FYI: I can confirm this solution works, but I could not determine why you are using a different approach for (VirtualView?.Color == Colors.Transparent)

It seems that the hierarchy is different from the default because the uniquely created TransparentPopoverBackgroundView is specified in the SetBackgroundColor method of the class below.

[src\CommunityToolkit.Maui.Core\Views\Popup\PopupExtensions.macios.cs]

[Toine-db]

Just created a quick workaround until this ends up in a release.

Its an extra handler: h.AddHandler<PopupX, PopupXHandler>(); Where PopupX is an empty class public class PopupX : Popup { }

and 2 partials: PopupXHandler, 1 empty and the iOS:

public partial class PopupXHandler : PopupHandler
{
	protected override MauiPopupX CreatePlatformElement()
	{
        return new CommunityToolkit.Maui.Core.Views.MauiPopupX(MauiContext ?? throw new NullReferenceException(nameof(MauiContext)));
	}
}

public class MauiPopupX : MauiPopup
{
	public MauiPopupX(IMauiContext mauiContext) : base(mauiContext)
	{
	}

	public override void ViewDidLayoutSubviews()
	{
		base.ViewDidLayoutSubviews();

		if (OperatingSystem.IsIOSVersionAtLeast(17))
		{
			if (VirtualView?.Color == Colors.Transparent)
			{
				View?.Superview?.Superview?.Subviews.OfType<UIImageView>().FirstOrDefault()?.RemoveFromSuperview();
			}
			else
			{
				View?.Superview?.Superview?.Superview?.Subviews.OfType<UIImageView>().FirstOrDefault()?.RemoveFromSuperview();
			}
		}
	}
}

[Toine-db]

FYI: this approach requires a little tweaking because it goos wrong when showing multiple popups one after another