Ion-content doesn't scroll on android

ionic-v1
1

The <ion-content> is completely non-functional on Android when it comes to scrolling. Can someone provide a functioning codepen that shows off regular scrolling and works (tested) on both Android and iOS, cause I am at the and of my wits. Tried everything. Ionic is fantastic, but whenever I try to scroll things everything becomes buggy and just a pain to work with.

<div class="modal transparent">
    <div class="card">
        <i class="icon ion-ios7-close close-modal" ng-click="closeModal()"></i>
            <div class="item item-text-wrap popuparticle">
            <ion-content>
            <h3>Mind like Water: any player</h3>
            <p>The player has learned to apply martial arts techniques to the sports field without incurring the wrath of the Referee. Instead of battering opponents with physical strength, the player uses leverage and balance to knock down their opponent, turning the other player’s own strength and speed against them.</p>
            <h3>Can’t feel a thing: any player</h3>
            <p>The player gets 1 additional automatic success whenever they make an Armour check, in effect ignoring one extra injury each time.</p>
            </ion-content>
            </div>
    </div>
</div>

This has to scroll. It does in the browser. But not on the device. Android 4.4

2

Soo your markup is a little off,

Try this

ion-modal-view.transparent
  ion-content
    div.card
      ...

(excuse the jade short hand)

3

I don’t get it. Comment says one thing, codepen says another…

4

Move the ion-content tags from inside the card to out side the card.

5

On top of that, I don’t want my card to scroll, but the content inside the card. :smile:

6

You see, the card is a pop-up, inside which I have content that is often longer than the modal itself, so the content needs to be scrollable and it is in Firefox, but not on the device. And this happened to me very often. Scrolling is the buggiest feature of all. :frowning:

7
8

Nope. :frowning: Not working. Have you personally tested this code on mobile? Cause yeah, just like my code, works well in a browser, but not mobile…

9

Yup, tested it on a nexus 5, works fine for me

10

Odd… Scrolling has always been an issue for me. So often in fact that I’ve been pushing my boss to move to native development.

11

Could it be anything else in your code? Have you done some linting of your js?

12

hi there ,this happen to me now .and i noticed that even the content is scrolling ,it is not as fluent as on ios platforms.please help me !

13

Do you have an codepen you could provide? What kind of content are you trying to scroll?

14

Depends on your Android version. The laggy scrolling is not a Ionic thing, it´s a problem with the native android browser render webpages. This will change in android version >= 4.4. So stay calm. :wink:

15

I have a android device ,it is android version 4.4.2 .But the laggy scrolling still happens. so weird

16

I am trying to build another demo today ,and if there is a problem ,i will mention you in my topic . However, the real problem is the laggy scrolling ,even on an android version 4.4.2 device . That is too boring !

Thank you all the same .

17

Hi avago i had facing a same problem of scrolling than i used that

-----code here----------
And add this css in cutom css .wrapper { width: 100%; 
height: 100%;

}
.left-half {
float: left;
width: 100%;
padding: 12px;
}
.right-half{
width: 50%;
margin: 0 0 0 50%;
}
Scroller will work fine on android and ios.