Ionic-framework: Entire view can be slided up when ion-content and ion-footer-bar are used together

[CoenWarmer]

First off congrats on the release of beta2! Ionic keeps improving and that's great.

I just upgraded my project to beta2 and I am seeing some issues. One I reported on the forums in the topic about testing the new taps (but that topic seems to have been removed? I can't find it anymore on the forum) is this:

When using ion-content and ion-footer-bar in one partial, it is possible to drag the whole view up and down, sliding everything (ion-header-bar, ion-content and ion-footer-bar under the status bar for about 5-10 pixels.

I'm using this partial:

<ion-view title="Information">

  <ion-content class="has-header has-footer" scroll="false" padding="false">
  Stuff
  </ion-content>

  <ion-footer-bar class="bar-clear">
   Stuff
  </ion-footer-bar>

</ion-view>

Steps to reproduce:

1. Load this partial on device or simulator.
2. Put your finger anywhere on the screen
3. Move upwards then downwards
4. Observe how whole view drags up 5 to 10 pixels.

When you remove ion-footer-bar, the whole view isn't draggable anymore (as it should be).

Version: 1.0.0 beta2
Platform: Everything that uses Cordova

[CoenWarmer]

Screencast: https://www.dropbox.com/s/dmwf7og55yq5wph/1.mov

Just in case it wasn't clear from the video: in the second half of the video I remove ion-footer-bar from the partial and recompile the app and run it from Xcode.

[ajoslin]

Thanks @CoenWarmer - looking at it.

[ajoslin]

Got it to break with ion-pane too - more minimal use case. Figuring it out now.

[CoenWarmer]

Thanks @ajoslin!

I believe you can stop the scrolling by setting position fixed on .pane, but I discovered that makes transition animations between views break on some Android versions (4.2 if I'm not mistaken).

[ajoslin]

Fixed on my end on iOS by adding overflow: hidden; to .pane class.

Unfortunately, Travis CI is down for today so the nightly build is not going to update yet. Could you try adding the css rule on your end and lemme know?

[CoenWarmer]

On it!

[CoenWarmer]

Just tested on iOS7.1, Android 4.4.2, 4.3 and 4.1.1. Looking good! Thanks @ajoslin!

[ajoslin]

Awesome :-)

[shprink]

Hi guys, we believe this fix created another problem on our product.

If you have a side menu within a modal ion-side-menu-content and ion-side-menu will be hidden.

I created a codepen for you to check out: http://codepen.io/shprink/pen/ugFCI Once you have opened the modal, remove the overflow: hidden; on the element with the class view (ion-side-menu parent) to see the result as it used to be (at least till beta.1).

Do not ask me why we want a side menu within a modal... We just like it that way :P

Thanks for your time,
Julien

[adamdbradley]

Adding overflow:hidden created this issue: https://github.com/driftyco/ionic/issues/1278

[adamdbradley]

Going to look into using another solution because adding overflow:hidden causes other issues.

[fredgalvao]

Any progress on that @adamdbradley ? The addition of overflow:hidden for beta.2 fixed many issues with scrolling I had on screens that didn't actually have content to scroll (similar to what OP had and demonstrated), and now they're back on beta.4.

I use native scrolling on my app and I've tested changing overflow-scroll to ="false" and it makes the unexpected scrolling go away, which hints about some style dependency on the js scrolling implementation, maybe. I'd like to keep using native scrolling though, because js scrolling performance is still very subpar.

Not all of the old issues are back though, as some of them were fixed through the change I suggested on https://github.com/driftyco/ionic/issues/1281.

[ajoslin]

This should be fixed in beta.5b.

We fixed the bugs caused by overflow:hidden on iOS by removing -webkit-backface-visibility:hidden on scrollViews.

Weird? Yes.

[shprink]

The problem is back... same codepen (updated to beta.6) http://codepen.io/shprink/pen/ugFCI
Cheers

[alexbainbridge]

I see the issue too (Beta 6, on device)

[seyuf]

I've solved this issue by setting this in my config.xml (my project have been init by generator-ionic)

<preference name="DisallowOverscroll" value="true" />

[philmerrell]

@seyuf Yes! Thanks for posting this. That was driving me crazy. Setting "DisallowOverscroll" to true in Cordova's config.xml worked for me.

[antoniocapelo]

+1 for @seyuf tip!

[blakerego]

I'm still experiencing this problem. It seems to work fine on the simulator, but once on a device, the over-scroll appears.

[blakerego]

I found a work-around for this. First, I added a class to the ion-nav-view in index.html -

<ion-nav-view class="over-pane"></ion-nav-view>

Then I added the following snippet of css. I believe the key here is fixing the position, and leaving a margin for the StatusBar -

.over-pane {
  &:first-child  {
    overflow: hidden;
    position: fixed;
    background-color: #DADBDD;
    margin-top: 20px;
    border-top: 1px solid #B2B2B2;
  }
}

At this point, the device scroll is properly locked down where it's not intended.

[seyuf]

@blakerego I think this might solve your issue. Try adding the "has-header" class on your directives:
ion-content class="has-header" overflow-scroll="true" scroll

[blakerego]

@seyuf The StatusBar was not the main issue I was trying to solve - it was more that whenever I deployed the app, the entire screen would move around if dragged (when using <ion-content scroll="false" ...>). This wouldn't occur on the simulator, or in a web environment, only on the device itself. Setting the position of the main pane to 'fixed' seemed to resolve this for me.

[seyuf]

@blakerego Humm i see, the issue is may be linked to the os version on the device. Anyway, could you give your specs so that people with the same issue can apply your solution (os version, device...)?

[blakerego]

Sure, I'm on an iPod-touch, 5th Generation running iOS version 8.3 (12F69). Other members on my team also experienced this when deploying our app to their iPhones.

Note that I'm also using the 'org.apache.cordova.statusbar' cordova plugin, in case that affects anything.

[djorocas]

Solution: when using scroll="true" a div is auto generated with a class="scroll" I think that class as an height try make the height bigger.

[blakerego]

Thanks @djorocas , you're correct. The problem is that the inner scroll div did not have the correct height, so scrolling failed. I've created a small directive that you can use on the ion-content element that fixes this issue. It takes the parent's height, and applies it to the child div -

I've set my 'cons' to 53 + 60 px, but this will probably vary, depending on your situation.

myModule.directive('ensureScroll', [
  function() {
    var directive = {

      link: function(scope, element){
        var heightSetter = element.parent()[0];
        var height = heightSetter.offsetHeight;
        var target = element.children()[0];
        var cons = 53 + //header
                   60;  //subheader
        $(target).height(height + cons);
      }
    };
    return directive;
}]);

The markup will look like -
<div class="height-needed">
<ion-content ensure-scroll>
...
</ion-content>
</div>

[17holeinone]

I have tried all of the suggestions here and this problem is still occurring, seems that no matter what, the "page" is always "longer" than the "screen" and therefore it can be scrolled a bit putting a part of the header under the status bar. This is making the APP look and feel like a webpage instead of a native app.
Please help!

[ronisgracie]

I have the same issue @17holeinone if you find a solution please let me know.

[17holeinone]

I managed to fix this by tweaking some of the values in the ionic.css file, namely .has-header, .has-subheader and .has-tabs-tops I also changed the height of the .view-container to 96% instead of 100% and that helped.

This wasn't perfect ...

In any case I am not in need of this anymore since I decided to change the app a bit and started using a Side Menu for navigation instead of tabs ...

[Freundschaft]

phew, this is quite a big but, on Android the issue is also present but far less noticable there is only a slight drag shadow, but it shouldnt be there as well. Anyone got a good fix for this one?
I tried all of these and they didnt work

    <preference name="webviewbounce" value="false" />
    <preference name="UIWebViewBounce" value="false" />
    <preference name="DisallowOverscroll" value="true" />
    <preference name="disallowOverscroll" value="true" />

[DanielDornhardt]

Hi, for anybody still stumbling over this, we just solved this in our own meteoric-fork of ionic by setting the body to position:relative. For some reason that wasn't set and setting it did fix this for us.

Yay! :D

[feliperugai]

Just ran into this issue.. None of the above worked for me... any suggestions?!

[1BJK903]

Okay, somehow I fixed this by setting:

.view-container {
   position: fixed;
}

Instead of position: absolute;

[sarthology]

@1BJK903 It's fixed for now 🤣. Thanks mate

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.