Repository: CommunityToolkit/Maui

Issue #1317: [BUG] The size and position of Popup is wrong on Android and iOS.
Created: 2023-08-02T07:12:07Z
Is there an existing issue for this?

 I have searched the existing issues

Did you read the "Reporting a bug" section on Contributing file?

 I have read the "Reporting a bug" section on Contributing file: https://github.com/CommunityToolkit/Maui/blob/main/CONTRIBUTING.md#reporting-a-bug

Current Behavior
I won't mention the difference between Popup's Margin and CornerRect here.
In order to make it easier to understand the four corners of the Popup, the layout is as follows.
<toolkit:Popup xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
    x:Class="MauiComm_IssuePopupSizePosition.PopupPage">
    <Grid VerticalOptions="Fill" HorizontalOptions="Fill" BackgroundColor="Red">
        <Grid WidthRequest="10" HeightRequest="10" VerticalOptions="Start" HorizontalOptions="Start" BackgroundColor="Blue" />
        <Grid WidthRequest="10" HeightRequest="10" VerticalOptions="Start" HorizontalOptions="End" BackgroundColor="Blue" />
        <Grid WidthRequest="10" HeightRequest="10" VerticalOptions="End" HorizontalOptions="Start" BackgroundColor="Blue" />
        <Grid WidthRequest="10" HeightRequest="10" VerticalOptions="End" HorizontalOptions="End" BackgroundColor="Blue" />
    </Grid>
</toolkit:Popup>


Specify the following for Size, HorizontalOptions, VerticalOptions of Popup.
Size = "100, 100"
HorizontalOptions = "Fill"
VerticalOptions = "Fill"

Below are the execution results for Android and iOS.

  
    [Android]
    [iOS]
  
  
    
    
  

Android shows the Popup in the center, iOS shows the Popup in the top left, and in iOS it's not showing up in the intended position. I was expecting iOS to show a popup in the middle like Android does.
Next, when you specify a size for the popup that exceeds the screen size.
Size = "1000, 1000"

I verified by changing HorizontalOptions and VerticalOptions as follows on Android and iOS.
HorizontalOptions = "Start"
VerticalOptions = "Start"

  
    [Android]
    [iOS]
  
  
    
    
  

HorizontalOptions = "Center"
VerticalOptions = "Start"

  
    [Android]
    [iOS]
  
  
    
    
  

HorizontalOptions = "End"
VerticalOptions = "Start"

  
    [Android]
    [iOS]
  
  
    
    
  

HorizontalOptions = "Fill"
VerticalOptions = "Start"

  
    [Android]
    [iOS]
  
  
    
    
  

HorizontalOptions = "Start"
VerticalOptions = "Center"

  
    [Android]
    [iOS]
  
  
    
    
  

HorizontalOptions = "Center"
VerticalOptions = "Center"

  
    [Android]
    [iOS]
  
  
    
    
  

HorizontalOptions = "End"
VerticalOptions = "Center"

  
    [Android]
    [iOS]
  
  
    
    
  

HorizontalOptions = "Fill"
VerticalOptions = "Center"

  
    [Android]
    [iOS]
  
  
    
    
  

HorizontalOptions = "Start"
VerticalOptions = "End"

  
    [Android]
    [iOS]
  
  
    
    
  

HorizontalOptions = "Center"
VerticalOptions = "End"

  
    [Android]
    [iOS]
  
  
    
    
  

HorizontalOptions = "End"
VerticalOptions = "End"

  
    [Android]
    [iOS]
  
  
    
    
  

HorizontalOptions = "Fill"
VerticalOptions = "End"

  
    [Android]
    [iOS]
  
  
    
    
  

HorizontalOptions = "Start"
VerticalOptions = "Fill"

  
    [Android]
    [iOS]
  
  
    
    
  

HorizontalOptions = "Center"
VerticalOptions = "Fill"

  
    [Android]
    [iOS]
  
  
    
    
  

HorizontalOptions = "End"
VerticalOptions = "Fill"

  
    [Android]
    [iOS]
  
  
    
    
  

HorizontalOptions = "Fill"
VerticalOptions = "Fill"

  
    [Android]
    [iOS]
  
  
    
    
  

Everything looks correct on Android, but it is only displayed starting from the top right. I was expected that when I gave a Popup a size greater than the screen size, the size of the Popup would be limited by the screen size.
On iOS, Popups are disappearing or appearing in unintended sizes and positions.
Similarly, I was expected that when I gave a Popup a size greater than the screen size, the size of the Popup would be limited by the screen size.
Expected Behavior
If the size of the Popup does not exceed the screen size, I was expected it to be displayed in the center if Fill is specified for HorizontalOptions and VerticalOptions.

  
    [iOS]
  
  
    
  

I was expected the Popup's size to be limited to the screen size if the Popup's size exceeds the screen size.

  
    [Android]
    [iOS]
  
  
    
    
  

Steps To Reproduce
The steps to reproduce are as follows.
[Case 1]

Launch the app uploaded to github with the device on iOS
Set With to 100, Height to 100, HorizontalOptions to Fill, VerticalOptions to Fill
Press Show button

[Case 2]

Launch the app uploaded to github with the device on iOS
Set With to 1000, Height to 1000
Select any HorizontalOptions
Select any VerticalOptions
Press Show Button

Link to public reproduction project repository
https://github.com/cat0363/MauiComm-IssuePopupSizePosition.git
Environment
- .NET MAUI CommunityToolkit: 5.2.0
- OS: iOS 16.4, Android 11.0
- .NET MAUI: 7.0.92
Anything else?
No response

Duplicate issue #1312: [BUG] Popup margin on iOS 
Created: 2023-07-31T03:50:00Z
Is there an existing issue for this?

 I have searched the existing issues

Did you read the "Reporting a bug" section on Contributing file?

 I have read the "Reporting a bug" section on Contributing file: https://github.com/CommunityToolkit/Maui/blob/main/CONTRIBUTING.md#reporting-a-bug

Current Behavior
Using a Popup I could define the size, because I have to show the popup with a full width, however it is only functional on Android, on iOS it has a different behavior, forcing to show a vertical and horizontal margin(or padding maybe) which cannot be removed.
Android

iOS

Expected Behavior
It should be possible to define the full width and full height for iOS in the same way as Android.
Steps To Reproduce

Open and run solution from reproduction repository on iOS.
Click the button "Open Popup" and observe the bug.

Link to public reproduction project repository
https://github.com/frarcedev/PopupApp
Environment
- .NET MAUI CommunityToolkit: 5.2.0
- OS: Simulator iPhone 14 PRO iOS 16.4 and Physical Device iPhone 14 PRO iOS 16.6
- .NET MAUI: 7.0.86
Anything else?
The public reproduction project is created using .NET MAUI Blazor but in .NET MAUI the behavior is the same.

Closing comment (2023-08-04T21:37:56Z): Duplicate #1317