[iOS] V3.0 Unexpected left margin inside the ListView control, after the control is moved outside of the screen boundaries and back (iPhone X devices in Portrait mode only)

Description

The Xamarin.Forms.ListView control on iOS introduces unexpected left margin after being shifted outside of the screen boundary and back using the TransformX function. This only happens on iPhone X devices in Landscape mode.

In this scenario, I create a slide in menu, which uses ListView control to display Menu Items. When the user taps on the "Menu" button (see screenshots in the sample solution below), the menu slides in from the left. When the user dismisses the menu, it slides out back to the left. Once the menu panel control is created, it stays hidden outside the boundaries of the view. The menu panel control is created dynamically, placed outside of the view and attached to the parent control, then its position is manipulated using TransformX with animation.

Here is the sample solution which demonstrates the issue: https://github.com/skolesni/Issues.ListViewTranslate.Forms

This code has been working in a number of production apps since 2016. Since the introduction of the iPhone X devices (with the notch) the issue started to appear only on iPhone X devices. The code works fine on any pre-iPhone X devices, e.g. iPhone 8, iPhone 8 Plus, etc., on Android and UWP.

I have tried different approaches to create a sliding effect of the menu, but never get satisfying results with the ListView in the scope of affected devices. If I use other controls, such as StackLayout of items, the solution works as expected.

Once the sample solution is downloaded, please have a look at the screenshots in the "Screenshots" folder.

Steps to Reproduce

1. Download the solution from GitHub repo given above.
2. Start the app on iOS X device or iOS X simulator in portrait (normal) mode.
3. Tap the "Menu" button - note that the menu slides in from the left, and the remaining screen is dimmed.
4. Observe that the "Home", "Messages", "Settings" and "About" menu items have a correct 16px margin on the left
5. Tap on "Messages" item, this will highlight the item. This proves that the ListView is working as expected
6. Tap anywhere outside the menu panel to close it
7. Repeat step 2 again and observe that the menu appears as expected
8. Close the menu
9. Rotate device Counter-Clockwise to turn the device to the Landscape mode
10. Tap the "Menu" button - note that the menu slides in from the left
11. Observe that this time the "Home", "Messages", "Settings" and "About" menu items are shifted significantly to the right (see screenshot file "Simulator Screen Shot - iPhone XR - Landscape.png")
12. Close the menu item
13. Rotate device Clockwise to turn the device to the Portrait mode again
14. Observe that the menu appears as expected

Expected Behavior

There is no unexpected margin on the left in the menu panel

Actual Behavior

There is an unexpected margin of approximately 75px on the left in the menu panel

Basic Information

For a brief description of the solution, please refer to the "readme.md" file in the https://github.com/skolesni/Issues.ListViewTranslate.Forms repository

• Version with issue:
• Last known good version: Pre iPhone X devices work fine
• IDE: Visual Studio 2017 Pro
• Platform Target Frameworks:
  • iOS: 12.1
  • Android: N/A
  • UWP: N/A
• Android Support Library Version: N/A
• Nuget Packages: Xamarin.Forms 3.4.0
• Affected Devices: iPhone X, iPhone XS, iPhone XS Max, iPhone XR

Screenshots

Screenshots are provided in the "Screenshots" folder of the https://github.com/skolesni/Issues.ListViewTranslate.Forms repository