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?