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

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```

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

Any news on this? Any workarounds?

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

¯\_(ツ)_/¯-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

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

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

+1

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

@brandyscarney

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

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

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

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

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

@FabioGois

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

+1

1+

+1

@tobiasmuecksch

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.

Navigation Menu

Repository navigation

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

7 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

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

Description

Activity

brandyscarney commented on May 10, 2017

Pitttt commented on Jun 7, 2017

peterpeterparker commented on Jun 9, 2017

danielfliegauf commented on Jun 26, 2017

tundak commented on Jul 10, 2017

radzik07 commented on Jul 14, 2017

gregor-srdic commented on Aug 9, 2017

Lottid commented on Aug 14, 2017

sya71 commented on Aug 16, 2017

mchenx commented on Aug 23, 2017

7 remaining items

arcanys-ivan commented on Oct 12, 2017

FabioGois commented on Oct 15, 2017

arcanys-ivan commented on Oct 16, 2017

adnan333bd commented on Dec 22, 2017

mtuliomk commented on Jan 5, 2018

jd0048 commented on Jan 15, 2018

duckfev3r commented on Jan 15, 2018

thezakman commented on Jan 19, 2018

obravoInserious commented on Jan 22, 2018

tobiasmuecksch commented on Jan 23, 2018

mhartington commented on Jan 23, 2018

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions