'no-bounce' not working on iOS (v3.1.1)

[burger1992]

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

I'm submitting a ... (check one with "x")
[X] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:
Scroll bounce effect is still visible on iOS emulator and device (should be disabled).
it works as expected on android (no bounce effect)

Expected behavior:
scroll bounce disabled,
Steps to reproduce:

must be run using the emulator, or deployed to iOS device.

Related code:

<ion-content no-bounce>
<!-- your content here -->
</ion-content>

Other information:

This feature request might be helpful (#7061)
Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

Cordova CLI: 6.5.0 
Ionic Framework Version: 3.1.1
Ionic CLI Version: 2.2.3
Ionic App Lib Version: 2.2.1
Ionic App Scripts Version: 1.3.6
ios-deploy version: 1.9.1 
ios-sim version: 5.0.13 
OS: macOS Sierra
Node Version: v7.8.0
Xcode version: Xcode 8.3 Build version 8E162```

[brandyscarney]

Thanks for the issue! I confirmed this is an issue when there is enough content to cause the page to overflow. See the following e2e test: https://github.com/driftyco/ionic/tree/master/src/components/content/test/no-bounce

[Pitttt]

Any news on this? Any workarounds?

I am having this issue as well...

[peterpeterparker]

There was another issue (#10329) regarding the bounce effect on iOS which happens when the content is bigger than the screen. The issue was close arguing that this is a normal behavior on iOS, which I agree on when it comes to Safari but which I don't agree when it comes to "native App". As far as I know, I never installed an App from the App Store which was producing such a bouncing effect.

When it comes to my app, I see this bouncing effect as a one of the major reason why we really found the GUI and user interaction better on Android, where this bouncing effect doesn't happen.

Therefore I would really love to see a solution. I invested some hours to try to find a solution (see comments in related issue) but unfortunately didn't found a solution yet :( except maybe at least a quick and dirty solution for one page

[danielfliegauf]

¯\_(ツ)_/¯-Workaround (only for pages where content is NOT bigger than the screen)

Add this to your app.scss

.content-ios:not([no-bounce])>.scroll-content::before { bottom: 0; }

---

global packages:

@ionic/cli-utils : 1.4.0
Cordova CLI      : 7.0.1 
Ionic CLI        : 3.4.0

local packages:

@ionic/app-scripts              : 1.3.7
@ionic/cli-plugin-cordova       : 1.4.0
@ionic/cli-plugin-ionic-angular : 1.3.1
Cordova Platforms               : android 6.0.0 ios 4.4.0
Ionic Framework                 : ionic-angular 3.3.0

System:

Node       : v6.10.0
OS         : macOS Sierra
Xcode      : Xcode 8.3.3 Build version 8E3004b 
ios-deploy : 1.9.0 
ios-sim    : 6.0.0 
npm        : 3.10.10 

[tundak]

any update ? no bounce not working for pages that have content bigger than the screen?

global packages:

@ionic/cli-utils : 1.4.0
 Cordova CLI      : 7.0.1 
 Ionic CLI        : 3.4.0

local packages:
@ionic/app-scripts              : 1.3.7
@ionic/cli-plugin-cordova       : 1.4.0
@ionic/cli-plugin-ionic-angular : 1.3.1
Cordova Platforms               : ios 4.4.0
Ionic Framework                 : ionic-angular 3.5.0

System:
Node : v6.9.4
OS : macOS Sierra
Xcode : Xcode 8.3 Build version 8E162
ios-deploy : 1.9.1
ios-sim : 3.1.1
npm : 4.2.0

@danielfliegauf Awesome... Thank you! This solved my problem!
Have you found a solution for pages that have contents bigger than the screen?

[radzik07]

Unfortunately the solution above is not enough... and no-bounce still doesnt work on 3.5.0.

[gregor-srdic]

+1

[Lottid]

Me, too.
no-bounce still doesnt work on 3.5.3.

[sya71]

I am sure it's not work on 3.5.3. @brandyscarney

[mchenx]

interesting, I'm using v2.2.3 and ion-content has no bouncing, even I set has-bouncing="true", it just doesn't work.