Scrollview shifts content down when a subview element visibility changes (after scrolling).

[derlidio]

Description

ScrollView will shift its subview down (change its Y property), disregarding content alignment (Start/Center) if it has been scrolled (ScrollY is > 0) and any component hides/shows (content size changes) after that. This only happens on iOS. Tested on iPhone 15 iOS 17 (simulator) using .NET 8 RC2 (8.0.0-rc.2.23479.6).

Steps to Reproduce

1. Clone the repo and build the project. Run it on iPhone Simulator iOS 17;
2. Tap the button. A yellow area will appear;
3. Scroll the screen to the end;
4. Tap the button again.

The ScrollView content shall be displaced at that moment. Sample code will spit the Y position of the VerticalStackLayout (subview) at the Application Output window.

Link to public reproduction project repository

https://github.com/derlidio/ScrollViewBug.git

Version with bug

Unknown/Other

Is this a regression from previous behavior?

Yes, this used to work in Xamarin.Forms

Last version that worked well

Unknown/Other

Affected platforms

iOS

Affected platform versions

iOS 17

Did you find any workaround?

Listen to the OnPropertyChanged event of the subview. When It's Y property changes, counter the change by setting it's TranslationY to -Y (negative Y).

Relevant log output

No response

[dinisvieira]

Also having this issue. In my case I have a page that already has a lot of content and if I add any more content programmatically (after scrolling) I get an empty space at the top and I can't scroll to the end/bottom of the content.
So it seems the height of the content is correct but it shifts down (just like this issue mentions)

[derlidio]

@dinisvieira: My app has a lot of dynamic content. I found a workaround, but it's kind of a dirty one. I've added a listener to the OnPropertyChanged event of my ContentView (which is the sole child of the ScrollView). When it's Y property changes, I set its TranslationY property to -Y (minus Y). This way I could keep the vertical alignment consistent (Start).

[dinisvieira]

@derlidio Thanks for sharing. Even if it's hacky it's good to know there's a way around this until it gets fixed.

[tekmun]

I have the same issue too.
No issue on net-7. Migrated to net8-rc.2 and found this bug affecting all my pages.
Will try out the workaround now.

[XamlTest]

Verified this on Visual Studio Enterprise 17.8.0 Preview 5.0(8.0.0-rc.2.9373). Repro on iOS 16.4, not repro on Android 14.0-API34 and Windows 11 with below Project:
ScrollViewBug.zip

[justintemplar]

This is a breaking change for me. Only on iOS.

[jsuarezruiz]

Could be caused by #18321

[dinisvieira]

I have tested .Net 8 RC1 and issue doesn't seem to be present there. So it's possibly a recent regression.

[derlidio]

@jsuarezruiz: It may be related, yes. I had problems with content size too, but I think those were related to racing conditions. When more than one change happens to the content in short intervals, there is a big chance the content size will end up messed. There is also some issues related to input focus + soft keyboard. As I said, I have a lot of dynamic content in my app, and I also start scrolling animations to reposition input fields. If the ScrollView is animating (ScrollToAsync) at the same time an entry is receiving focus (the soft input is entering the screen), the entire screen will shift down. I mean, not only the content of the ScrollView (the topic of this issue), but the whole app layout. This will leave a black area at the top of the screen, which may (or may not) be corrected when you dismiss the keyboard. This also happens only on iOS. Still trying to reduce it to a minimal reproducible repo before filing the issue.

[mattleibow]

This issue has a nice sample: #18496

MainPage XAML:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
  x:Class="HW_Playground.MainPage"
  xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
  xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">

  <ScrollView
    Orientation="Vertical"
    VerticalOptions="FillAndExpand"
    VerticalScrollBarVisibility="Always">
    <VerticalStackLayout
      Padding="30,0"
      Spacing="25"
      VerticalOptions="Center">
      <Image
        HeightRequest="200"
        HorizontalOptions="Center"
        SemanticProperties.Description="Cute dot net bot waving hi to you!"
        Source="dotnet_bot.png" />
      <Label
        FontSize="32"
        HorizontalOptions="Center"
        SemanticProperties.HeadingLevel="Level1"
        Text="Hello, World!" />
      <Label
        FontSize="32"
        HorizontalOptions="Center"
        SemanticProperties.HeadingLevel="Level1"
        Text="Hello, World!" />
      <Label
        FontSize="32"
        HorizontalOptions="Center"
        SemanticProperties.HeadingLevel="Level1"
        Text="Hello, World!" />
      <Label
        FontSize="32"
        HorizontalOptions="Center"
        SemanticProperties.HeadingLevel="Level1"
        Text="Hello, World!" />
      <Label
        FontSize="32"
        HorizontalOptions="Center"
        SemanticProperties.HeadingLevel="Level1"
        Text="Hello, World!" />
      <Label
        FontSize="32"
        HorizontalOptions="Center"
        SemanticProperties.HeadingLevel="Level1"
        Text="Hello, World!" />
      <Label
        FontSize="32"
        HorizontalOptions="Center"
        SemanticProperties.HeadingLevel="Level1"
        Text="Hello, World!" />
      <Label
        FontSize="32"
        HorizontalOptions="Center"
        SemanticProperties.HeadingLevel="Level1"
        Text="Hello, World!" />
      <Label
        x:Name="ViewCounter"
        FontSize="32"
        HorizontalOptions="Center"
        SemanticProperties.HeadingLevel="Level1"
        Text="COUNTER"
        TextColor="Red" />
      <Label
        FontSize="32"
        HorizontalOptions="Center"
        SemanticProperties.HeadingLevel="Level1"
        Text="Hello, World!" />
      <Label
        FontSize="32"
        HorizontalOptions="Center"
        SemanticProperties.HeadingLevel="Level1"
        Text="Hello, World!" />
      <Label
        FontSize="32"
        HorizontalOptions="Center"
        SemanticProperties.HeadingLevel="Level1"
        Text="Hello, World!" />
    </VerticalStackLayout>
  </ScrollView>

</ContentPage>

MainPage Code Behind:

namespace HW_Playground;

public partial class MainPage : ContentPage
{
  int count = 0;

  public MainPage()
  {
    InitializeComponent();
  }


  protected override void OnAppearing()
  {
    base.OnAppearing();

    Timer.Start();
  }

  private IDispatcherTimer Timer
  {
    get
    {
      if ( _timer == null )
      {
        _timer = Dispatcher.CreateTimer();
        _timer.Interval = TimeSpan.FromSeconds( 5 );
        _timer.Tick += Tick;
      }

      return _timer;
    }
  }
  private IDispatcherTimer? _timer;


  int counter = 1;
  private void Tick( object? _sender, EventArgs _eventArgs )
  {
    ViewCounter.Text = $"Counter: {counter++}";
  }

}

[mattleibow]

May be related to this PR: #18277

[mattleibow]

From some analysis done:

Previously the content was arranged with the CrossPlatformArrange bounds while now it is arranged with the one of the ScrollView which include the ScrollY position. Because of that the content's Y is changed as well.

[rjhind]

For me, I see the scroll view jump back to zero and shift content down when I horizontally drag on a graphics view on the scroll view. When horizontal dragging occurs, I disable the scroll view to prevent 2-way dragging.

This is on iOS and only occurred in rc2-9511. It didn’t happen in rc2-9373 so I’ve reverted back to that for now.

[PureWeen]

We reverted the cause of this issue for GA so this should be resolved in GA and then we should have a better fix for SR1

[Kaiffa]

@PureWeen any idea when GA will be released? This issue causes major issues for my app

[mattleibow]

GA goes out on November 14-16 at .NET Conf 2023! Hope to "see" you there too!

https://www.dotnetconf.net/