[Bug] Scrollview overlaps over its child views - Android (Xamarin.Forms v5.0.0.1709-pre4)

[PaulsonM]

Description

Hi, I have a Scrollview that has a Grid as its child view in my Xamarin.Forms App. In Android, the Scrollview overlaps over the Grid content displayed. This issue arised after upgrading Xamarin.Forms from v3.4.0.1029999 to v5.0.0.1709-pre4.

Why I want Xamarin.Forms v5.0.0.1709-pre4? I upgraded to v5.0.0.1709-pre4 due to a fix that is available for iOS in this version.

Why I'm having Grid as Scrollview's child? And I have Grid as Scrollview's child because inside this Grid there is a webview whose height is dynamically auto-sized using WebviewRenderer. This height is not auto-sizing if I use StackLayout as Scrollview's child.

Anything you devs can help me here.. Thanks in advance!

Steps to Reproduce

1. In a contentpage, Place Grid as child inside Scrollview
2. Inside this Grid, display some text (webview).
3. Set BackGroundColor to the Scrollview to verify the scrollview overlapping the text displayed in its child (Grid)
4. On this pageload, the text displayed inside Grid is shown some few lines and then the Scrollview backgroundColor is overlapped

Expected Behavior

Scrollview should not overlap over its child views

Actual Behavior

Scrollview overlaps over its child views

Basic Information

• Version with issue: Xamarin.Forms v5.0.0.1709-pre4
• Last known good version: v3.4.0.1029999
• Platform Target Frameworks:
  • Android: 10.0
• Android Support Library / AndroidX Version: Some Android.Support Libraries as they are used by 3rd party controls

Environment

Screenshots

Workaround

No.

[PureWeen]

@PaulsonMac can you provide a repro or your xaml please?

I've tested the following on 5.0 pre4 and pre5

    <ScrollView Background="Yellow">
        <Grid Background="Green">
            <Label Text="test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test "></Label>
        </Grid>
    </ScrollView>

and the grid always fills the space for me

[PaulsonM]

Sorry.. I have a webview inside the Grid. This webview height is available height (ie., "*"). And I have added other controls as neighbors to this webview.

I'll try to give you the structure in my XAML

[PaulsonM]

Hi @PureWeen, this is my XAML structure :

<ScrollView>
  <Grid Margin="0,6">
      <Grid.RowDefinitions>
                <RowDefinition Height="100" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="*" />
                <RowDefinition Height="Auto" />
      </Grid.RowDefinitions>
      <Grid Grid.Row="0">
       ...................................
      </Grid>
      <StackLayout Grid.Row="1" >
       ...................................
      </StackLayout>
      <StackLayout Grid.Row="2" >
       ...................................
      </StackLayout>
      <StackLayout Grid.Row="3" >
       ...................................
      </StackLayout>
      <customControl:CustomWebview Grid.Row="4" source="{Binding HtmlSource}"
      <Frame Grid.Row="5" >
       ...................................
      </Frame>
  </Grid>
</ScrollView>

[PaulsonM]

Important : I also now notice that after sometime, the overlapping goes off and then the full webview content is displayed.

[PureWeen]

@PaulsonMac I'm still not seeing any issues here. Can you try to create a small project that reproduces your issue?

The issue here that @hartez is addressing looks like it might fix your issue https://github.com/xamarin/Xamarin.Forms/pull/13085

So my next suggestion would be to wait until that's merged and then try out the next prerelease or our nightly feed

[PaulsonM]

The issue here that @hartez is addressing looks like it might fix your issue

13085

Praise the Lord JESUS

Hi @PureWeen , thank you very much for this information. As mentioned in #12900, downgrading Xamarin.Forms to v4.8.0.1560 resolves my overlap issue.

[PaulsonM]

Looks like downgrading resolves the issue only in simulator.

But in real device, this issue is happening regularly

[PaulsonM]

Have downgraded Xamarin.Forms back to v3.4.0.1029999 now to make sure everything is working fine.

Hoping for the release that has the #13085 fix

[PaulsonM]

Tried upgrading to Xamarin.Forms 5.0.0.1829-pre6 hoping that the fix would be included from https://github.com/xamarin/Xamarin.Forms/commit/30f29a3118d4b4c3c20e20c269e1aae33e540e70 (https://github.com/xamarin/Xamarin.Forms/pull/13085).

But the error persists.. so, I may have to downgrade again back to v3.4.0.1029999 as told earlier. But since iOS requires v4.5 or newer due to uiwebview deprecation, I'm dealing with two code bases now.

[AswinPG]

if we change the height request of a child element from the cs file or if we are using multiple bindable layout inside the scrollview, this error happens. we cannot see to the end. the elements at the end are not shown

[jsuarezruiz]

@AswinPG Do you mean resize in the OnAppearing (for example) once?, could you attach a sample where reproduce the issue?

[PaulsonM]

Hi @jsuarezruiz, I'm setting the height of webview in renderer as the height is dynamic with different source.

Can you try with whether now you can reproduce? @AswinPG - is it possible to confirm whether you're also doing the same?

Below is the code where I compute and set the webview height dynamically

public async override void OnPageFinished(WebView view, string url)
            {
                try
                {
                    _webView = view;
                    if (_xwebView != null)
                    {

                        view.Settings.JavaScriptEnabled = true;
                        await Task.Delay(100);
                        string result = await _xwebView.EvaluateJavaScriptAsync("(function(){return document.body.scrollHeight;})()");
                        _xwebView.HeightRequest = Convert.ToDouble(result);
                    }
                    base.OnPageFinished(view, url);
                }
                catch(Exception ex)
                {
                    Console.WriteLine($"{ex.Message}");
                }
            }

[PaulsonM]

Greatly need this bug fix now as our app users in older Xamarin.Forms version (3.4.0.1029999) are facing the issue - https://github.com/xamarin/Xamarin.Forms/issues/6700 about 2.4k times as of today.

Anybody knows whether this scrollview/grid computation issue is resolved in any recent Xamarin Forms releases - in either v5.0.0.1709-pre4 or later ?

[PaulsonM]

Calling ForceLayout() for Scrollview after setting the HeightRequest dynamically in OnPageFinished fixes the overlap problem for me. Have planned to use this until this bug is fixed in a newer Xamarin.Forms version. Any other better solution available?

public async override void OnPageFinished(WebView view, string url)
            {
                try
                {
                    _webView = view;
                    if (_xwebView != null)
                    {

                        view.Settings.JavaScriptEnabled = true;
                        await Task.Delay(100);
                        string result = await _xwebView.EvaluateJavaScriptAsync("(function(){return document.body.scrollHeight;})()");
                        _xwebView.HeightRequest = Convert.ToDouble(result);
                        (_xwebView.Parent.Parent as ScrollView).ForceLayout(); //this fixes the problem
                    }
                    base.OnPageFinished(view, url);
                }
                catch(Exception ex)
                {
                    Console.WriteLine($"{ex.Message}");
                }
            }

[rmarinho]

hi @PaulsonM we need a example to try to understand better the problem. Can you upload a small repo?!

Thanks