Gestures only work on the part where the map control is displayed on the screen when it is first displayed. [iOS]

[cat0363]

Description

If the map control is fully displayed on the screen when displayed for the first time, pin tap operations on the map control and pinch/pan operations on the map control will work.

However, if the map control is partially displayed on the screen when it is first displayed, pin tap operations on the map control and pinch/pan operations on the map control will not work. At this time, the tap operation on the map control and the pinch/pan operation on the map control work only on the part that was displayed on the screen.

To reproduce this problem, define the layout as follows.

<Grid RowDefinitions="44,*">
    <Button Grid.Row="0" x:Name="btnShowMap" Text="Show Map" BackgroundColor="Blue" TextColor="White" Clicked="btnShowMap_Clicked" />
    <ScrollView Grid.Row="1" Orientation="Vertical">
        <StackLayout Orientation="Vertical">
            <!-- padding for validation -->
            <Grid HeightRequest="550" />
            <Frame x:Name="frmMap" Margin="10,5,50,10" Padding="2" BorderColor="#333333" CornerRadius="5" HasShadow="False" IsVisible="False">
                <Map x:Name="map" IsShowingUser="False" IsZoomEnabled="True" HeightRequest="600" />
            </Frame>
        </StackLayout>
    </ScrollView>
</Grid>

Initially hide the map control. Toggles the map control from hidden to visible after pressing the Show Map button. Next, after scrolling so that the map control is displayed on the screen, tap the pin on the map control and perform a pinch/pan operation on the map control.

Below is a demo video. The demo video was shot with iPhone 14 iOS 16.4 Simulator.

[When the map control is partially visible] => Grid HeightRequest="550"

https://user-images.githubusercontent.com/125236133/234812007-90ede62b-13a6-41ff-8131-b7f2f7867b87.mp4

Pin tapping on the map control and pinch/pan operations on the map control are not working. Next, after pressing the Show Map button, perform various operations on the part where the map control was displayed on the screen (the upper part of the map control).

https://user-images.githubusercontent.com/125236133/234813488-20c7d8d0-1f85-4a82-b380-43803fb65aa0.mp4

https://user-images.githubusercontent.com/125236133/234813447-29cc1501-83e9-4155-a6db-b40036ab5a7d.mp4

https://user-images.githubusercontent.com/125236133/234813322-0ce3510e-3cc7-4d63-bc1c-ca78b33e2172.mp4

Various operations are taking place.

Below is the area where the map control is displayed in the screen after pressing the Show Map button.

Below are areas where the various gestures work and where they don't, based on the above.

[When the map control is fully visible] => Grid HeightRequest="0"

https://user-images.githubusercontent.com/125236133/235012953-5c26f420-1e57-4e9b-85f5-9f87c8e98113.mp4

Pin tapping on the map control and pinch/pan operations on the map control are working.

From the above, you can see that pin tapping on the map control and pinch/pan operations on the map control do not work in areas where the map control is not displayed on the screen when it is first displayed.

Attention: Please adjust the padding for verification according to the screen height of the device that reproduces this problem.

<Grid HeightRequest="550" />

Additional Information: When the terminal is rotated and the map control is redrawn, pin tapping on the map control and pinch/pan operations on the map control will work. They also work by showing the control first.

Steps to Reproduce

Below are the steps to reproduce.

1. Press the Show Map button.
2. Scrolls the map control so that it is visible within the screen.
3. Tap the pin on the map control.
4. Perform a pinch operation on the map control.
5. Perform a pan operation on the map control.

Please perform steps 3 to 5 in the part where the map control is not displayed when displayed for the first time.

At step 3, I would expect the pin on the map control to be tapped. At step 4, I would expect pinch gestures to work on the map control. At step 5, I would expect pan gestures to work on the map control.

Link to public reproduction project repository

https://github.com/cat0363/Maui-IssueMapsGesture.git

Version with bug

7.0 (current)

Last version that worked well

Unknown/Other

Affected platforms

iOS

Affected platform versions

iOS 16.4

Did you find any workaround?

It is possible to work around this issue by displaying the map control completely within the screen when it is first displayed.

Relevant log output

No response

[cat0363]

The first and last videos were the same video, so I'll replace them tomorrow.

[cat0363]

Replaced last video.

[cat0363]

Additional Information: This problem also occurs with grids. I tried replacing the map control with a grid and verified it. Similarly, in the case of the grid, various gestures worked only in the first visible part, but once they worked, they also worked in the parts that were not displayed.

The same thing happens with the map control and the grid, but in the case of the grid, once it works, even the parts that were not displayed will work.

Below is the source code for verification. (Grid Version) https://github.com/cat0363/Maui-IssueGesture.git

[mtopolewski]

@cat0363 @jsuarezruiz Hi, I think this problem is related to this issue: https://github.com/dotnet/maui/issues/14624. I spent some time yesterday, trying to get rid of the problem and I found a solution that I've explained in that topic (see my last post). Hope it will work also foe you

[cat0363]

Hi, @mtopolewski The workaround you suggested is great. It worked for me. Thanks to you, I was able to move forward. I hope that issue #14624 is fundamentally resolved.

[Yannikk1996]

Hi, i tried your workaround for a scrollview with a grid in a refresh view. but it is not working. Any ideas?

[cat0363]

Hi, @Yannikk1996 The decisive difference from this issue is whether or not it is wrapped in RefreshView. I have uploaded the source code for 2 patterns, Map and Grid placed inside a ScrollView, and the workaround works for both. Maybe the nature of the problem is different.

[Yannikk1996]

Hi, @cat0363,

thanks for your answer. The workaround works by adding an additional grid between Refresh and scrollview :)