Setting padding on scrollviewer displace the scrollbar on ios and android

MaximeDion-Work commented 3 years ago

Current behavior

Scrollbar is affected by padding on iOS and Android, not the same behavior as UWP

Expected behavior

ScrollBar is not affected by padding on iOS and Android

How to reproduce it (as minimally and precisely as possible)

<Page x:Class="Repro1.MainPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:local="using:Repro1"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      mc:Ignorable="d">

    <Grid Background="White">
        <ScrollViewer Padding="50,0">

            <Grid Background="Pink"
                    Height="2000"
                    Margin="0,50"/>
        </ScrollViewer>
    </Grid>
</Page>

Workaround

None

Environment

Nuget Package:

[x] Uno.UI / Uno.UI.WebAssembly / Uno.UI.Skia
[ ] Uno.WinUI / Uno.WinUI.WebAssembly / Uno.WinUI.Skia
[ ] Uno.SourceGenerationTasks
[ ] Uno.UI.RemoteControl / Uno.WinUI.RemoteControl
[ ] Other:

Nuget Package Version(s):

Affected platform(s):

[x] iOS
[x] Android
[ ] WebAssembly
[ ] WebAssembly renderers for Xamarin.Forms
[ ] macOS
[ ] Skia
- [ ] WPF
- [ ] GTK (Linux)
- [ ] Tizen
[ ] Windows
[ ] Build tasks
[ ] Solution Templates

IDE:

[ ] Visual Studio 2017 (version: )
[x] Visual Studio 2019 (version: 16.7.6)
[ ] Visual Studio for Mac (version: )
[ ] Rider Windows (version: )
[ ] Rider macOS (version: )
[ ] Visual Studio Code (version: )

Relevant plugins:

[ ] Resharper (version: )

agneszitte commented 3 years ago

WASM need to be tested also for this issue (Happening with Uno.UI 3.1.6 and Uno.UI latest dev also)

agneszitte commented 2 years ago

I will investigate first if the bug is still happening with latest Uno

agneszitte commented 2 years ago

I will investigate first if the bug is still happening with latest Uno

Issue still happening on iOS/Android with latest Uno.UI (tested with 4.1.0-dev.511). WASM is fine.

agneszitte commented 2 years ago

Workaround

@MaximeDion-Work here is a workaround for this issue: Use a margin on the content instead of a padding on the ScrollViewer.

    <Grid Background="White">
        <ScrollViewer>
              <!-- If use on all platforms including WASM, you will need to add an additional border
                     around the content before the margin to avoid these related issues: 
                             - https://github.com/unoplatform/uno/issues/6443
                             - https://github.com/unoplatform/uno/issues/7000 -->
                      <Border>
                  <Grid Background="Pink"
                    Height="2000"
                    Margin="50,50"/>
                  </Border>
        </ScrollViewer>
    </Grid>

Possible solution

Since for iOS/Android the NativeScrollViewerStyle uses a different template for the ScrollViewer in order to be able to use the NativeScrollContentPresenter, a possible solution would be to remove the Margin="{TemplateBinding Padding}" on the ScrollContentPresenter inside the default template and find a way to add the Padding at the NativeScrollContentPresenter level (UIScrollView for iOS and UnoTwoDScrollView for Android). This possible solution will need to be thoroughly tested and also these related issues should be taken care of at the same time since it seems related in some ways after syncing with @dr1rrb :

unoplatform / uno