Ionic-framework: bug(ion-content): content vertically scrollable on iOS

[dylanvdmerwe]

Ionic version: (check one with "x")
[x] 2.x

I'm submitting a ... (check one with "x")
[x] bug report

Current behavior:
I have a simple ion-slides component. On Android the content is locked. However the same code on iOS the user is able to scroll the screen up and down. This makes the app feel 1000% non-native. Note that this was not happening in RC3 but now in the latest nightly this behaviour is happening.

edit: This appears to be happening on any screen without an ion-header!

Has something changed? Why would this work correctly on Android and not on iOS?

See below:

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

Cordova CLI: 6.4.0
Ionic Framework Version: 2.0.0-rc.3-201612100458
Ionic CLI Version: 2.1.17
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 0.0.47
ios-deploy version: 1.9.0
ios-sim version: 5.0.10
OS: macOS Sierra
Node Version: v6.9.1
Xcode version: Xcode 8.1 Build version 8B62

[dylanvdmerwe]

This seems to be happening on any screen without an ion-header on iOS 10.1. Works as expected on Android.

[dylanvdmerwe]

My issue is that a screen without an ion-header should not automatically scroll. It gives away that the app is not native.

To get around this, for now, we use the following:

.no-scroll {
    div.scroll-content {
        overflow-y: hidden;
    }

Then on any ion-content screens that we wish to not scroll:

<ion-content class="no-scroll">

[jgw96]

So for anyone else running into this issue, adding the no-bounce attribute to your ion-content will do the trick. This is actually a docs issue as we do not currently document no-bounce anywhere.

[jgw96]

Update: alex is gonna take care of documenting this attribute

[jgw96]

This issue was moved to driftyco/ionic-site#940

[jgw96]

Moved this issue to the site repo since its actually a docs issue. Both me and @dylanvdmerwe tested the no-bounce attribute and it fixes this issue so we just need to get that attribute documented.

[vishwaa17]

Well I have faced this issue and you have to do 2 small steps:

1. Go to your HTML page, update ion-content tag like this

• <ion-content class="no-scroll">

1. Go the Page css file and update -

 .no-scroll {
    div.scroll-content {
        overflow-y: hidden;
    }

This will work guys. Happy coding!!

[heidji]

@vishwaa17 awesome, only problem is it prevents scrolling on any scrollable page nested within the app

improvement:
.no-scroll > .scroll-content { overflow-y: hidden; }

[vishwaa17]

@heidji - I have applied that but nested scrolls are also not working then. So I think there should be some other code need to apply here

[heidji]

make sure you add the class only to the ion-content you dont want to scroll. otherwise i have no idea why it shouldn't work. i am using it successfully on my code and i generally nest 3 pages within each other top level + pushed pages ...

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.