Scrolling vertically on iPhone not consistently smooth


#1

I am testing with the “tabs” starter app. I found that on iPhone, if you have a page with content that does not exceed the scrollable area’s height, then when drag it, you will find that it scrolls smoothly, 1 pixel at a time.

However, if your contents exceeds the scrollable area’s height, then when you scroll it, you will find that it scrolls jumpy, 2 pixels at a time.

This is one of the first things I noticed when trying out Ionic. Scrolling 2 pixels at a time does not feel as native as it should. (It feels more like what you get when you don’t have the native resolution support set up for your app for iPhone 6. However, I know that it is rendering at the native resolution because the status bar is small how it should be.)

Also, I have confirmed this behavior in the tabs starter app on both the iPhone 4 and iPhone 6.

You can see this behavior for yourself by downloading the “Ionic View” app from the App Store.

Once installed go to “Preview a Shared App”. Notice the contents of this screen do not extend beyon the screen height. Drag the contents to scroll it very slowly. You will see it scroll smoothly. It is scrolling 1 pixel at a time.

Now go Back and tap the Cog at the top right. Then choose Terms of Service. Drag to scroll very slowly. Now you will see that the contents does not scroll as smoothly. It is scrolling about 2 pixels at a time.

I added an absolutely positioned div to the template in quesiton, with some scrolling content using -webkit-overflow-scrolling:touch. That div scrolls smoothly as I would expect, 1 pixel at a time. I also noticed that the scrolling indicator on the right of my div looks different than the scrolling indicator on the ion-content container. What can I do to make all Ionic content scroll smoothly, 1 pixel at a time? Does it not use -webkit-overflow-scrolling:touch by default?


Collection repeat vs android native scrolling
#3

As instructed here I added overflow-scroll=“true” to the ion-content tag. That fixed it so it scrolls smoother on iOS. The page also states that this can be done globally using $ionConfigProvider.

However, as a result of this, now the items in my ion-list have highlighting issues, such that when scrolling up and down, sometimes an item in the list randomly gets highlighted as you tap to start or stop scrolling, but it’s not the item you tapped so it seems strange.