Xamarin forms custom scrollview showing weird behavior

Question

I have a customized ScrollView as per the requirement which is based on the TLScrollView.

Now when I am adding some data to it there is weird behaviour that I noticed recently a part of the screen area is unclickable, And the rest of the part works fine.

Now the same code works like a charm on Android but iOS is showing this weird behaviour,

Xaml:

  <controls:TLScrollView Orientation="Horizontal" BackgroundColor="White"
          x:Name="ListAddons" ItemsSource="{Binding ListAddons}" AbsoluteLayout.LayoutFlags = "All"
            AbsoluteLayout.LayoutBounds = "0.5, 0.5, 1.0, 1.0">

                <controls:TLScrollView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <StackLayout BackgroundColor="Transparent" Margin = "0, 5, 0, 0">
                                <Grid BackgroundColor="White" InputTransparent="true"  RowSpacing = "0" ColumnSpacing = "0">
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="0.5*" />
                                        <RowDefinition Height="45.0*" />
                                        <RowDefinition Height="45*" />
                                    </Grid.RowDefinitions>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="100" />
                                        <ColumnDefinition Width="1" />
                                    </Grid.ColumnDefinitions>
                                    <ffimageloading:CachedImage Source="{Binding Icon, Converter={StaticResource Base64ToImageConverter}}"
                   ErrorPlaceholder = "nopreviewlandscape" LoadingPlaceholder = "loadingicon"
                              Grid.Row="1" Grid.Column="0" HorizontalOptions="Center"
                              VerticalOptions="Center" Aspect="AspectFill" />
                                    <Label x:Name="lblRecommendationsName"  Margin="0" Text="{Binding CategoryName}"
                                  LineBreakMode="WordWrap" XAlign="Center" TextColor="{StaticResource gray_text_color}"
                                  VerticalOptions="Center" HorizontalOptions="Center" Grid.Row="2"
                                  Grid.Column="0" Style="{StaticResource RecommendationName}">
                                        <Label.FontFamily>
                                            <OnPlatform x:TypeArguments="x:String">
                                                <On Platform="iOS" Value="OpenSans-Light" />
                                                <On Platform="Android" Value="OpenSans-Light" />
                                            </OnPlatform>
                                        </Label.FontFamily>
                                        <Label.TextColor>
                                            <OnPlatform x:TypeArguments="Color">
                                                <On Platform="Android" Value="#000000"></On>
                                            </OnPlatform>
                                        </Label.TextColor>
                                    </Label>

                                    <BoxView WidthRequest="0" Grid.Row="1" Grid.Column="1"
                                  BackgroundColor="{StaticResource separator_color}"
                                      Grid.RowSpan="4" Style="{StaticResource BoxViewHomeStyle}">
                                    </BoxView>

                                </Grid>
                                <StackLayout.GestureRecognizers>
                                    <TapGestureRecognizer Command="{Binding Path=BindingContext.AddonsClickCommand,Source={x:Reference ListAddons}}"
                                      CommandParameter="{Binding CategoryId}"
                                  />
                                </StackLayout.GestureRecognizers>
                            </StackLayout>
                        </ViewCell>
                    </DataTemplate>
                </controls:TLScrollView.ItemTemplate>
            </controls:TLScrollView>

First, I thought there must be some sort of an overlapping in there which might be causing this but then I realized that the same code was working on Android devices and causing this on iOS.

The part of the image that is unclickable is inside the black box everywhere else the click event works well.

Answer 1

Well, I am not sure what was causing the issue but updating to the latest version of Xamarin.Forms fixed the bug!

I updated to Xamarin.Forms version 4.5.0.396

Feel free to get back if you are facing a similar issue.