Scroll content hides lower 10 pixels or so when at rest


#1

This is kind of a weird issue. I thought I would describe it here first, before opening the issue up on Github. When you have scroll content that is larger than the available scroll window, when you scroll all the way down and wait until the bounce rests, the bottom 10 pixels of the content is still hidden. The only way to make it visible is to “pull up” the content to make it visible. The easy workaround is to add some empty space a the bottom of your content to compensate, but I can imagine scenarios where that would not be desirable.

To see this, go to one of the example Ionic codepens like: http://codepen.io/ionic/pen/HjnFx and resize the browser to give is a very small visible scroll window, and have a look at the bottom.

My gut feel is that it has is some calculation issue in the scroll-math.


#2

That issue exists because the tab bar is effectively a footer. So each tab content, needs the has-footer="true" attribute.

<ion-content has-header="true" has-footer="true" padding="true">

See : http://codepen.io/calendee/pen/gdpED


#3

I think the correct attribute would be has-tabs="true" And that solves the issue on the codepen for me. In my app I have both has-tabs and has-header set to true and it still happens. Let me see if I can create an example.

Thanks!


#4

Very good point - thank you. I’ve updated the sample to use has-tabs="true".