ScrollView messing up the content when scrolls down and back up

[relez]

Hi there... I have an issue with ScrollView, when I scroll down and then back up multiple times, the top of the content starts to mix things up and get something like shown in the images attached. This is the code I am using:

<ScrollView #formContainer row="1" class="page-content">
    <StackLayout  class="" style="padding:0 0 10 0;">
    ...
    </StackLayout>
</ScrollView>

The page should look like this: Instead, after few scrolling down and back up, it gets like this:

I have uploaded a test app so you can check the issue: https://github.com/relez/scrollview-test-ng.git

Steps to reproduce the issue:

1. Scroll down to the bottom of the page.
2. Click on Submit button so the error messages appear.
3. Scroll back up.

Thanks!

[tsonevn]

Hi @relez, Thank you for the provided sample project. I checked it on my side, and it seems that the issue appears only when you show a message with the nativescript-feedback plugin. The issue can be caused to a problem in the plugin. Regarding that, I would suggest contacting the plugin's author via opening a new issue here. Meanwhile, as a temporary solution, you can set up iosOverflowSafeAreaEnabled to false on the root container. For example:

items.component.html

<GridLayout iosOverflowSafeAreaEnabled="false" rows="*, 50" class="page page-content">
    <ScrollView row="0" >
.....
    </ScrollView>
    <Button row="1" text="Submit" (tap)="onSubmitButtonTap()" class="btn btn-primary btn-rounded-sm" style="margin:0;"></Button>
</GridLayout>

[relez]

Hi @tsonevn, I have replaced the Feedback messages with a Dialog messages and the issue is still there, seems like the problem is not related to that plugin.

I will use the temporary solution as you suggested, but I would like to use the safe area in iOS.

Can you take a look at it again? Thanks!

[tsonevn]

Hi @relez, I tested the same scenario with an alert dialog, however, was unable to recreate the issue. Check out the Attached GIF file.

onSubmitButtonTap(): void {
        alert("test");

    }

[relez]

Hi @tsonevn, please make sure you remove the iosOverflowSafeAreaEnabled="false" in your example using Dialogs. It does not work here.

Thanks!

[tsonevn]

Hi @relez, Yes, the iosOverflowSafeAreaEnabled="false" is removed from the XML while testing the app, however as I have mentioned in my previous comment, the issue is not reproducible with the alert on my side.

I would suggest testing with the latest NativeScript and check if you will be able to recreate the issue.

[relez]

Hi @tsonevn, I have updated the project with the latest updates and still the issue persists. This is the package.json file:

{
    "nativescript": {
        "id": "org.nativescript.scrollviewtestng",
        "tns-ios": {
            "version": "5.2.0"
        },
        "tns-android": {
            "version": "5.2.0"
        }
    },
    "description": "NativeScript Application",
    "license": "SEE LICENSE IN <your-license-filename>",
    "repository": "<fill-your-repository-here>",
    "dependencies": {
        "@angular/animations": "~7.1.0",
        "@angular/common": "~7.1.0",
        "@angular/compiler": "~7.1.0",
        "@angular/core": "~7.1.0",
        "@angular/forms": "~7.1.0",
        "@angular/http": "~7.1.0",
        "@angular/platform-browser": "~7.1.0",
        "@angular/platform-browser-dynamic": "~7.1.0",
        "@angular/router": "~7.1.0",
        "moment": "2.24.0",
        "nativescript-angular": "~7.1.0",
        "nativescript-appversion": "^1.4.1",
        "nativescript-background-http": "^3.3.1",
        "nativescript-barcodescanner": "^3.0.0",
        "nativescript-camera": "^4.1.1",
        "nativescript-checkbox": "^3.0.3",
        "nativescript-directions": "^1.3.0",
        "nativescript-drawingpad": "^3.0.4",
        "nativescript-drop-down": "^4.0.1",
        "nativescript-email": "^1.5.3",
        "nativescript-feedback": "^1.3.3",
        "nativescript-geolocation": "^4.4.0",
        "nativescript-imagepicker": "^6.0.6",
        "nativescript-iqkeyboardmanager": "^1.3.0",
        "nativescript-loading-indicator": "^2.4.0",
        "nativescript-mediafilepicker": "^2.0.16",
        "nativescript-modal-datetimepicker": "^1.1.12",
        "nativescript-numeric-keyboard": "^4.2.0",
        "nativescript-orientation": "^2.2.1",
        "nativescript-pdf-view": "^2.0.1",
        "nativescript-phone": "^1.4.0",
        "nativescript-theme-core": "~1.0.4",
        "nativescript-ui-calendar": "^3.10.0",
        "nativescript-ui-chart": "^3.11.1",
        "nativescript-ui-listview": "^5.1.0",
        "nativescript-ui-sidedrawer": "^5.1.0",
        "reflect-metadata": "~0.1.8",
        "rxjs": "~6.3.0",
        "tns-core-modules": "^5.2.1",
        "zone.js": "^0.8.26"
    },
    "devDependencies": {
        "@angular/compiler-cli": "~7.1.0",
        "@nativescript/schematics": "~0.5.0",
        "@ngtools/webpack": "~7.1.0",
        "nativescript-dev-typescript": "~0.7.0",
        "nativescript-dev-webpack": "~0.19.0"
    },
    "gitHead": "9b6565a4513375a33a59c44262dfc1d818a8205e",
    "readme": "NativeScript Application"
}

I have pushed the changes to github too...