[solved] Has-bouncing is not working

ionic-v1
1

i am using phonegap/cordova 3.5.0. in phonegap 2.9.1 it was working fine.
here is code
<ion-content padding="true" overflow-scroll="true" scroll="true" scrollbar-y="true" has-bouncing="true" style="background-color: #fbfbfb; ">

here is my config file
<preference name="phonegap-version" value="3.5.0" /> <preference name="orientation" value="portrait" /> <preference name="DisallowOverscroll" value="false" /> <preference name="target-device" value="universal" /> <preference name="fullscreen" value="false" /> <preference name="webviewbounce" value="true" /> <preference name="prerendered-icon" value="true" /> <preference name="stay-in-webview" value="false" /> <preference name="ios-statusbarstyle" value="black-opaque" /> <preference name="detect-data-types" value="true" /> <preference name="exit-on-suspend" value="false" /> <preference name="show-splash-screen-spinner" value="true" /> <preference name="auto-hide-splash-screen" value="true" /> <preference name="disable-cursor" value="false" /> <preference name="android-minSdkVersion" value="7" /> <preference name="android-installLocation" value="auto" />

anything i missed?

2

Can you put together a codepen of this? Other than you’re using some older syntax, it seems like it should work fine.

3

i found this in documentation. there is no has-bouncing in ion-content
http://ionicframework.com/docs/api/directive/ionContent/

codepen: http://codepen.io/005vinay/pen/bwJCA

4

SIlly me, didn’t catch it in your first post. It’s because you have overflow-scroll="true"

This disables our JS scroller and enabled the native overflow-scroll. The js scroll is responsible for the bouncing effect

1 Like
5

ohhhhhh, i’ll chek than let you know. thank you @mhartington.

but if i remove overflow-scroll="true" i might be possible that scroll will not show up. please correct me.

6

Nope, if you remove overflow-scroll, our js scroll will kick in. You will still be able to scroll

7

@mhartington thank you. its working fine.

8

I removed overflow-scroll=“true” but it doesn’t bounce for me in all browsers I tried
OSX 10.9.4 including
Chrome Version 37.0.2062.94

9

Whats you code look like? codepen demo or plunker?

11

just modified the original to remove the line suggested

12

Has bouncing will work if you’re markup looks like so…

<ion-content>

      <div class="list">

        <a ng-repeat="item in items" 
           href="#/{{item.id}}"
           class="item item-thumbnail-left">

          <img ng-src="{{ item.image }}">
          <h2>{{ item.album }}</h2>
          <h4>{{ item.artist }}</h4>
        </a>

      </div>

    </ion-content>
13

Does HW acceleration work with JS scrolling? It seems that on Android 4.4 disabling overflow-scroll makes scrolling very choppy.

I’ve read some Ionic forums suggesting that Android is ahead of iOS in WebKit etc, but it seems to me that Android is always the problem in getting good performance, across the board. I haven’t seen 1 Android device that does everything well - scroll, switch ion-tabs, etc. Is this normal? Or am I doing something wrong?

14

Just wanted to add my 2 cents if someone arrives here looking for help, had bounce working once and then it stopped. Had this written:
<ion-content class=" has-header" scroll="true" has-bouncing="true">

Changed into this and bouncing came back:
<ion-content class="has-header" overflow-scroll="false" has-bouncing="true">

6 Likes