Scroll not reaching bottom


#1

I have a problem in which scrolling to the bottom of a page doesn’t completely reach the actual bottom (it’s a few pixels above).

Here’s how it looks (image taken from iPhone):

Here’s how it should look like (image from browser):

Interestingly, it works in the browser, but on the actual device it doesn’t get completely to the bottom of the page. Help?


#2

Can you post your code? What version of ionic are you using, what platform and version are you using?


#3

I was using the 2085 nightly and had turned on full screen mode using ionic.Platform. When I tried disabling full screen mode, everything was working correctly.

Here is the piece of code that enabled full screen:

.controller('AppCtrl', function($scope) {
// Enable full screen.
ionic.Platform.ready(function(){
    ionic.Platform.fullScreen();
    if (window.StatusBar)
        StatusBar.hide();
});

})

** The AppCtrl is in charge of the sidemenu.


#4

I’m having this same problem but I am not using full screen mode either by invoking ionic.Platform.fullScreen() nor in the config.xml preferences.

I only have this problem on forms and a few pages with card lists and header and tabs. Straighter header and list works.


#5

Same here. Only happens on android. iOS is fine. Trying to put together a code pen to reproduce. I have tried invoking $ionicScrollDelegate.resize(), but it doesn’t help.
My list is being built dynamically based on a REST call.


#6

I have it in the browser and on iOS. Haven’t tested android yet.

I think it is definitely the scroll logic because the -76px here should be -96px.

<ion-content class="scroll-content ionic-scroll  has-header">
  <div class="scroll" style="-webkit-transform: translate3d(0px, -76px, 0px) scale(1);">
     ....
  </div>
</ion-content>

#7

I am actually seeing it on iOS now as well. It lets me scroll to the bottom, but when it “snaps” to a final position it cuts off the bottom. I am also seeing what you are. The transform appears to be off by 10-20px.


#8

What worked for me was to remove ‘margin’ css property and replace it with padding to keep the same look. For instance, lists and items use margins, so remove that and replace it with padding if you want to space them out.


#9

Are you still seeing this in the nightly versions?

I made this change and appeared to fix this issue, but maybe it didn’t for all cases: