[Bug] Strange behavior CollectionView RTL

[Elashi]

Description

My application is RTL. I have a horizontal RTL CollectionView inside a vertical ListView (because CollectionView inside a CollectionView is buggy in iOS). It works perfectly in Android with XF 4.8 (I did not test Android in XF 5) However in iOS, XF 5 pre3 , it crashes. And in XF 5 pre4 and XF 5 pre5, the crash goes away but I get the following strange behavior. when the page loads the first time without scrolling, everything looks good but when I scroll down then I scroll back up, everything flips horizontally.

Image bellow : Page is shown correctly Right To Left before scrolling

Image bellow : Page is flipped horizontally after scrolling

Steps to Reproduce

1. Create ListView with item templates that has horizontal CollectionView
2. Make sure to change the iOS application to right to left as specified in MS documentation
3. Change the page Direction to RightToLeft
4. wait until all data is loaded and confirm that all entries are shown in Right To Left direction correctly
5. Scroll all the way down until all shown items are hidden
6. then scroll all the way up to show hidden items again.

Expected Behavior

To show all items Right To Left consistently

Actual Behavior

After doing last step , horizontal CollectionView in items are shown flipped horizontally

Basic Information

• Version with issue: XF 5 pre4 and pre5
• Last known good version: XF 4.8
• Platform Target Frameworks: iOS
  • iOS: 12
• NuGet Packages: Xamarin.Forms and Xamarin.Essentials
• Affected Devices:

Environment

Visual Studio for Mac:

Show/Hide Visual Studio info

``` === Visual Studio Community 2019 for Mac === Version 8.8.1 (build 37) Installation UUID: 45662054-65e9-4d74-88d0-a3a28fb23904 GTK+ 2.24.23 (Raleigh theme) Xamarin.Mac 6.18.0.23 (d16-6 / 088c73638) Package version: 612000093 === Mono Framework MDK === Runtime: Mono 6.12.0.93 (2020-02/620cf538206) (64-bit) Package version: 612000093 === Xamarin Designer === Version: 16.8.0.507 Hash: e87b24884 Branch: remotes/origin/d16-8 Build date: 2020-10-29 00:31:38 UTC === Roslyn (Language Service) === 3.8.0-5.20515.7+713efb0e68d34ab75faaf709e071e5c2d8d4ed0e === NuGet === Version: 5.8.0.6860 === .NET Core SDK === SDK: /usr/local/share/dotnet/sdk/5.0.100/Sdks SDK Versions: 5.0.100 3.1.403 MSBuild SDKs: /Applications/Visual Studio.app/Contents/Resources/lib/monodevelop/bin/MSBuild/Current/bin/Sdks === .NET Core Runtime === Runtime: /usr/local/share/dotnet/dotnet Runtime Versions: 5.0.0 3.1.9 2.1.23 === .NET Core 3.1 SDK === SDK: 3.1.403 === Xamarin.Profiler === Version: 1.6.15.68 Location: /Applications/Xamarin Profiler.app/Contents/MacOS/Xamarin Profiler === Updater === Version: 11 === Apple Developer Tools === Xcode 12.2 (17535) Build 12B45b === Xamarin.Mac === Version: 7.0.0.15 (Visual Studio Community) Hash: 87a1b18d8 Branch: d16-8 Build date: 2020-11-16 21:39:40-0500 === Xamarin.iOS === Version: 14.6.0.15 (Visual Studio Community) Hash: 87a1b18d8 Branch: d16-8 Build date: 2020-11-16 21:39:41-0500 === Xamarin.Android === Not Installed === Microsoft OpenJDK for Mobile === Java SDK: Not Found Android Designer EPL code available here: https://github.com/xamarin/AndroidDesigner.EPL === Android SDK Manager === Version: 16.8.0.32 Hash: 01a7774 Branch: remotes/origin/d16-8 Build date: 2020-10-13 23:32:30 UTC === Android Device Manager === Version: 16.8.0.45 Hash: fc0af5f Branch: remotes/origin/d16-8 Build date: 2020-10-13 23:32:54 UTC === Build Information === Release ID: 808010037 Git revision: acd8ddc086768c701bd641d6ec27316f45813175 Build date: 2020-11-17 12:49:41-05 Build branch: release-8.8 Xamarin extensions: acd8ddc086768c701bd641d6ec27316f45813175 === Operating System === Mac OS X 10.15.7 Darwin 19.6.0 Darwin Kernel Version 19.6.0 Tue Nov 10 00:10:30 PST 2020 root:xnu-6153.141.10~1/RELEASE_X86_64 x86_64 ```

[rachelkang]

Hi, @Elashi - thanks for submitting this issue! Would you be able to share your project or a simple project that reproduces the same issue you're experiencing?

Also, this seems to be a duplicate of https://github.com/xamarin/Xamarin.Forms/issues/8260 - could you confirm whether or not you agree?

[Elashi]

Hi @rachelkang I apologize for the first post. Here is the correct example, I forgot to set the RightToLeft direction. Here is a small project. This project will show you: 1- in XF 5 pre3 version, when you scroll to the bottom, it crashes 2- in versions pre4 and pre5 , when scrolling to the bottom then back to the top , a mirrored copy of the item is drawn on top of the original item

Also, this seems to be a duplicate of #8260 - could you confirm whether or not you agree?

No in my case the element is still right to left but another copy of the element is flipped horizontally and drawn on top of the original one. as shown in the attached image

Attached is the sample rtl_cv_in_lv.zip

[rachelkang]

Hi, @Elashi - thanks for sharing! I think what's happening in your case is that the RTL is being applied to every single control on the page (not just the labels themselves), which is resulting in some very odd behavior. I was able to fix it by removing the FlowDirection="RightToLeft" property from the page as a whole, and adding the property to each of the labels. Hope this helps! Let me know how it goes :)

[Elashi]

Thank you @rachelkang Nice hack (I did not try it though) but I think this would be a good hint for the developer to fix the problem. I would rather keep using the old version and wait for the fix.

[matt-uib]

We have the same problem in the footer of a collection view. All views in the footer get mirrored. Also happens only on iOS.