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: #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 #1281.