Ionic-framework: '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?

[Maziar-Fotouhi]

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

[Maziar-Fotouhi]

@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.

[mowen0303]

+1

[Agnostic]

+1

[luckylooke]

Same here. no-bounce has no effect.. I was trying clean ionic project ionic conference and applied no-bounce at speakers list page.. bouncing of scroll has not been disabled

cli packages: (/Users/lucky/Documents/projects/ionic-conference/node_modules)

@ionic/cli-utils  : 1.9.2
ionic (Ionic CLI) : 3.9.2

global packages:

Cordova CLI : 7.0.1

local packages:

@ionic/app-scripts : 2.1.4
Cordova Platforms  : android 6.2.3 ios 4.3.1
Ionic Framework    : ionic-angular 3.6.1

System:

ios-deploy : 1.9.1 
ios-sim    : 6.0.0 
Node       : v6.9.5
npm        : 5.4.0 
OS         : macOS Sierra
Xcode      : Xcode 8.3.3 Build version 8E3004b

Tested with xcode simulator iPhone 6 Plus

[radzik07]

The no-bounce seems to SOMETIMES be working on modals. But only sometimes and for the first time I show it. Then it breaks. Need fix asap

[leongzw]

any further updates on this? bouncing on iOS ionic web app causes scroll focus on body instead of the scrolling content, and this made whole page has a scroll freeze behavior, this is why we need to disable the iOS bouncing.

[vptcnt]

+1

[samuelfaj]

+1
Waiting this fix SO MUCH

[hshahbridge2solutions]

+1 waiting for this fix.

[arcanys-ivan]

any updates on this issue? I can see its still bouncing up, specially pages on Tabs, ionic 3

[FabioGois]

¯_(ツ)_/¯ Another Workaround...

.ios {
  <your-screen> {
    .scroll-content {
      -webkit-overflow-scrolling: auto !important;
    }
  }
}

[arcanys-ivan]

Yes its a workaround, i also tried that, but the scrolling is not nice :( @FabioGois

[adnan333bd]

+1

[Maziar-Fotouhi]

@brandyscarney Is this issue being seen? Do we need to create a new issue?

[mtuliomk]

1+

[jd0048]

1+

[duelingbanjos]

+1

[thezakman]

+1

[obravoInserious]

+1

[tobiasmuecksch]

+1

[mhartington]

Hi folks! So some background on the bound. The bounce is part of iOS's native scrolling behavior. If there is content that exist beyond the bounds of a scrollable element, it will bounce/create the rubber band scroll effect. This is part of how ios handles scrolling.

The "work around" described here can work, but also disables smooth scrolling. Why wasn't this an issue in Ionic 1? Because we used JS scrolling. The no-bounce attribute only applies when the content does not exceed the parent container.

@tobiasmuecksch Please keep the comment constructive. Inappropriate images being post will result in getting banned. This is the one and only warning.