IOS scrollbar ionic 2 glitch

[msio]

Hi, I'm using ionic 2 and unfortunately it is not working pretty well with this framework but this plugin is really great 👍 . Vertical scrollbar goes out of scrollable context. it does not matter if keyboard is hidden or open. It is visible on video here The issue remains also on real device. Thanks for any help how to fix it Michal

[EddyVerbruggen]

Can I perhaps reproduce that on my machine so I can debug it?

[msio]

@EddyVerbruggen you mean you are gonna test it on your machine right ?

[EddyVerbruggen]

I'd like to see what you're seeing on my machine, so I'd like to run your code/project locally.

[mlynch]

Happy to see what's going on here as well. Hoping to make this part of our official chat starter.

[jrmcdona]

@mlynch Do you have anymore info about this official chat starter you mentioned in this thread? We have started a community chat app for Microsoft in the Xbox group. I am having issues with the keyboard on iOS using the ionic platform (hence why I am looking at this paid plugin repo) and having a tough time getting anything concrete in regards to timelines on some fixes that are in a WKWebView test branch commited back in May (in the Ionic issues github where this is tracking). Are you able to shed any light on this or a the so I can report back with better timelines to the Xbox leads I am working with. Would certainly appreciate it and it would be super helpful! Thanks

[jrmcdona]

I am having this issue too in an ionic project. My header is pushed up and then the scrollbar does some funky business. The scrollbar might be because of this issue you can find on the Ionic based keyboard here https://github.com/ionic-team/ionic-plugin-keyboard:

Keyboard.disableScroll

Prevent the native UIScrollView from moving when an input is focused. The telltale sign that this is happening is the top of your app scrolls out of view (if using Ionic, your header bar will disappear).

This does not prevent any DOM elements from being able to scroll. That needs to happen from CSS and JavaScript, not this plugin.

cordova.plugins.Keyboard.disableScroll(true); cordova.plugins.Keyboard.disableScroll(false);

Eddy I am guessing your keyboard doesn't have this functionality for us to use?

Thanks

[jrmcdona]

@EddyVerbruggen Here is a video: https://1drv.ms/u/s!AnyXOztVClZYcqaZZFy-9QeFsnk

[jrmcdona]

@EddyVerbruggen is this a known issue or do I need to build a simple repo? If you know a work around that woud be awesome. If you want me to make a new issue I can do that too.

Thanks

[jrmcdona]

Fixed it by adding in the ionic keyboard and adding the disable scroll function they have.

I am going to need the ionic keyboard anyway for a few search boxes, so It was a good test to make sure they didn't clash. Hopefully they will not as I keep going along!

First install the Ionic keyboard: https://ionicframework.com/docs/native/keyboard/

Then add this code:

  this.platform.ready().then(() => {
      /*
      * Disable the Ionic Keyboard Plugin scroll for iOS only
      * https://github.com/driftyco/ionic/issues/5571
      */

      if (this.platform.is('ios')) {
        this.keyboard.disableScroll(true);
      }
    });