Bounce on scroll not working in iOS

Hey everyone,

You know this kind of bouncing effect happening when you scroll up or down at extremities? Well I get this effect on the web version, but when I use the app in iOS simulator or even with TestFlight, I don’t have this effect. This is resulting in the app feeling a bit buggy as I think we all expect this bouncing effect to happen.

I’m using Vue JS but I’m not using the Ionic framework for the page structure.

I am using Capacitor to build the iOS App.

Thanks in advance

Show example page of your structure. IIRC you would need the wrap all non ionic elements within ion-content tag for the bouncy effect. You can create your own effect using css or using ionic animations.

1 Like

Thanks :slight_smile: Appreciate your answer.
I don’t really want to use too much ionic as I am doing a fullscreen image background.

But you just made me realise that I maybe don’t want this effect on the whole page but more on the content itself.

For the fun, I installed a fresh Ionic project and the bounce effect is there right off the bat.

I’m not sure how I’m gonna end-up doing that in CSS but thanks for the help :slight_smile:

1 Like

The bouncing is disabled in Capacitor apps, native apps don’t bounce, so not sure why you say “we all expect this bouncing”.

As Hills90210 said, if you have a content long enough to bounce, the div with the content should bounce, Ionic does that for you, if you don’t want to use ionic you can do it with css.
But header, bottom, tabs or other fixed elements should never bounce.

1 Like

Hey Julio,

Thanks for your answer. When you say Capacitor, do you mean capacitor without Ionic? Because if I install a fresh app with Ionic, the bounce is there. I feel every app I use has this bounce feeling when you scroll up or down to the extremity. So it does not feel like it stops abruptly.

I’m not using Ionic, so maybe that’s what you are saying? Capacitor itself does not use the effect, if that’s what you’re saying, I understand and I guess it makes sense.

Any direction to point to if I wanted to implement that in a non-Ionic app in CSS? DOes anyone have done that in the past?

Thanks a lot for the help.

PS: Sorry for the confusion between Ionic & Capacitor, I’m beginning with all of this and I’m still a bit confused between the 2 (the 3 even, with Cordova).