Ionic-framework: bug: iOS white screen after keyboard show (in v1.2.1 and v1.2.0 only)

[DanailMinchev]

Type: bug

Platform: ios 8 webview

Hi,

The bug is reproducible with latest ionic releases 1.2.1 and 1.2.0, but not with 1.1.1.
In 1.1.1 it works fine.

On iOS, when I tap on some html input:

• The keyboard is shown - OK:
  
• I can enter some text and select another inputs (but without closing the keyboard dialog) - OK
  
• Once the keyboard is closed (either with Done button or just by tapping to non-input space) - the inputs with their labels become white, but I can still type into inputs with white font - so it looks like white screen which overlays the content.
  
  

Code example:

<ion-view view-title="Log In" can-swipe-back="false" hide-back-button="true">
  <ion-content padding="true" has-bouncing="false">
    <form ng-submit="vm.loginFormAction(vm.loginFormData)" novalidate>
      <div class="list">
        <label class="item item-input item-floating-label">
          <span class="input-label">Username</span>
          <input ng-model="vm.loginFormData.username" type="text" placeholder="Email or Phone number">
        </label>
        <label class="item item-input item-floating-label">
          <span class="input-label">Password</span>
          <input ng-model="vm.loginFormData.password" type="password" placeholder="Password">
        </label>
      </div>
      <div class="padding">
        <button class="button button-block button-positive" type="submit">Log In</button>
      </div>
    </form>
  </ion-content>
</ion-view>

also I've tried with the new ion-input directive:

<ion-view view-title="Log In" can-swipe-back="false" hide-back-button="true">
  <ion-content padding="true" has-bouncing="false">
    <form ng-submit="vm.loginFormAction(vm.loginFormData)" novalidate>
      <div class="list">
        <ion-input class="item item-input item-floating-label">
          <ion-label>Username</ion-label>
          <input ng-model="vm.loginFormData.username" type="text" placeholder="Email or Phone number">
        </ion-input>
        <ion-input class="item item-input item-floating-label">
          <ion-label>Password</ion-label>
          <input ng-model="vm.loginFormData.password" type="password" placeholder="Password">
        </ion-input>
      </div>
      <div class="padding">
        <button class="button button-block button-positive" type="submit">Log In</button>
      </div>
    </form>
  </ion-content>
</ion-view>

ionic info

Your system information:

Cordova CLI: 5.4.1
Gulp version:  CLI version 3.9.0
Gulp local:   Local version 3.9.0
Ionic Version: 1.2.1-nightly-1867
Ionic CLI Version: 1.7.12
Ionic App Lib Version: 0.6.5
OS: Distributor ID: Ubuntu Description: Ubuntu 14.04 LTS 
Node Version: v5.0.0

ionic platform ls

Updated the hooks directory to have execute permissions
Installed platforms: android 5.0.0, ios 3.9.2
Available platforms: amazon-fireos, blackberry10, browser, firefoxos, ubuntu, webos

config.xml

  <preference name="HideKeyboardFormAccessoryBar" value="false"/>
  <preference name="KeyboardDisplayRequiresUserAction" value="false"/>
  <preference name="SuppressesLongPressGesture" value="true"/>

  <plugin name="ionic-plugin-keyboard" spec="1.0.8"/>

bower.json

"ionic": "driftyco/ionic-bower#1.2.1"
"ionic-platform-web-client": "0.2.1"

[mlynch]

Hmm, not able to reproduce on iOS 9. Can you try this app and let me know what you see in the first dashboard tab with the keyboard?

http://ionic-io-assets.s3.amazonaws.com/pp2.tar.gz

[DanailMinchev]

The result is the same as with my original app ..

• The initial screen (no tapping / action) - OK
  
• On Email or Phone Number input tapping - OK
  
• On Email or Phone Number texting "Test" - OK
  
• After tapping on the second input Password - white screen after quick blinking
  
  

I am using:

iPhone 4s
iOS 9.2 (13C75)
Xcode 7.1
xcodebuild -showsdks -> iOS 9.1

[Emeryao]

+1. It woks fine if I remove the ion-content tag after ion-view

[Lsozke]

+1 in iOS 9.2 / iPhone 6s
Temporary solved by replacing <ion-content> with <ion-scroll>

<ion-scroll direction="y" style="right: 0;bottom: 0;left: 0;position: absolute;" class="has-header has-subheader">

[RBLU]

I had the same. Reproducible in IOS Simulator iPhone 5s with IOS 9.2, but not with iPhone 6.
Temporary workaround is to set overflow-scroll to false on ion-content.

[andreialecu]

+1 seeing this with wkwebview

[SebastianSchirmer]

Seems to be the same issue as https://github.com/driftyco/ionic/issues/4645 where I added quite an extensive comment: https://github.com/driftyco/ionic/issues/4645#issuecomment-165884959

Our temporary workaround is to set overflow-y to hidden whenever a keyboard transition starts and to set it back to scroll whenever a keyboard transition has ended. Having this in place, the blank screen issue seems not to occur anymore. However, this should be temporary only.

[albertytau]

Yes, temporary downgrade to 1.1.1 to avoid this bug

[mlynch]

Do you guys have the ionic-plugin-keyboard plugin installed? I was only able to reproduce this without the plugin installed, which is expected. The keyboard plugin is required for proper keyboard behavior

[mlynch]

Okay, it seems to fail when using the accessory bar with the keyboard plugin. One solution is to not use the accessory bar (which is the default and more native like anyways). Looking into fixing this.

[mlynch]

Err, not quite resolved just yet, need to reset something

[Emeryao]

I haven't used the keyboard plugin but it dosen't work either

[andreialecu]

I cannot use ionic-plugin-keyboard because it is broken with WKWebView. Meaning the accessory bar cannot be hidden and it doesn't disable scroll either.

cordova-plugin-keyboard works as per this commit.

[mlynch]

Okay, just pushed a fix for this to master. Can you try and let me know?

I suppose we'll need to update our plugin for wkwebview. The major important point is that disable scroll has to be set to true on the web view if you want normal behavior. If you're not using WKWebView, you will want to use ionic-plugin-keyboard for your app.

[SebastianSchirmer]

Thanks @mlynch for the fix. I'll try it in a couple of days, off for New Years right now. We are using the keyboard plugin but not WKWebView.

[DanailMinchev]

@mlynch

I can confirm that it's working with my configuration:

• iOS 3.9.2
• ionic-plugin-keyboard 1.0.8

Thank you!

[SebastianSchirmer]

@mlynch Confirm that no blank screens occur anymore in our setup using 1.2.2.

[mlynch]

@leschirmeur thanks. Thinking of going back to JS scrolling for iOS given a number of issues we're discovering now. Want to apologize to everyone for the QA issues in this recent release.

[mazagatshy]

the problem exists with (select),
I have the same problem when taping on the screen to hide the select menu, the screen became white this invisible components

[mazagatshy]

using ion-scroll instead of ion-content solve the problem

[mohanchalla]

In My Case also the input labels are getting hidden by the keyboard in ios.

[salihklc]

Yes using ion-scroll instead of ion-content solve the problem but in my case I have fixed footer button in ion-footer-bar which is outside of ion-scroll but in the ion-view. I want to hide that footer when the keyboard opened but native.keyboardshow event not firing #33 . I don't want to write hard code event listener on focus or blur event for hide and show footer. Any opinion will be helpful thanks..

[mohanchalla]

If I use ion-scroll it showing white screen at the bottom of the screen.

[ghadeer-io]

@mohanchalla I had the same problem. If you add

height: 100% to
scroll-view.scroll-y classes

The white part at the bottom should go away.

[mohanchalla]

@ghadeerrahhal Thank you for your suggestion. I fixed this issue by using ion-scroll and style="position: absolute".

[salihklc]

I solve the issue besides I use ion-content. In my case all problem caused by has-footer, I remove the has-footer class when keyboard shown and add it back when keyboard hide.

window.addEventListener('native.keyboardshow', function () {
      document.body.classList.add('keyboard-open');
      var content = angular.element(document.getElementById($state.current.name));
      content.removeClass("has-footer");
    });
    window.addEventListener('native.keyboardhide', function () {
      var content = angular.element(document.getElementById($state.current.name));
      content.addClass("has-footer");
    }); 

I gave id on my all ion-content same as they route name like you see. For more detail write comment.
PS: After all , I realise this topic also related to my problem. Another approach.

[dwilt]

Had this issue as well. Converted ion-content to an ion-scroll and it fixed the issue. Thank you @Lsozke.

I've also noticed that the content pops back if you toggle any CSS property within the developer tools. It seems to be some kind of repaint issue.

[dwilt]

FYI, I had to revert the ion-scroll solution because ion-scroll introduces other problems with form elements and the keyboard.

[atul-athawale]

I had same issue.I replaced my view in this way.
<ion-nav-view> <ion-view> <ion-content> Hello! </ion-content> </ion-view> </ion-nav-view>

I found out that I missed <ion-view> in my sub template.
After adding <ion-view>issue was fixed.
For reference.
http://ionicframework.com/docs/api/directive/ionView/

[bent0b0x]

Is there a fix for the white screen issue? I still see it with this configuration:

ionic —version: 1.7.14
ionic.version: 1.2.4-nightly-1917
iOS: 9.2.1
I am using the ionic keyboard plugin

View Hierarchy
ion-nav-view
ion-view
ion-content (overflow-scroll="true")
ion-scroll

When the keyboard is up, and the user does any scrolling, then dismisses the keyboard, the whole ion-view goes white until the user taps again.

If I use this view structure:

ion-nav-view
ion-view
ion-content (no overflow-scroll)
ion-scroll

Then when an input gains focus the entire nav view jumps down and then back up. The screen going white, on the other hand, no longer happens.

[anasbud]

I have the same issue. Overflow-scroll didn't fix it :(

Any solution ?

[salihklc]

Hi,
here what I did for solution
Keyboard Configuration (I write this code in the angular module run function )

if (window.cordova && window.cordova.plugins.Keyboard) {
        if (isIOS) cordova.plugins.Keyboard.disableScroll(true);
        cordova.plugins.Keyboard.hideKeyboardAccessoryBar(false);
      }
      if (window.StatusBar) {
        StatusBar.styleDefault();
      } 

This code (above) is my keyboard configuration and after I add an event listener for keyboard show event (below), like you see in the code I catch current state name which is also my ion-content id. For example if my state define like myapp.state('contact', { cache: false, url: '/contact', templateUrl: 'templates/contact.html', controller: 'ContactCtrl' }) this then I add id on my ion-content (in contact.html) like <ion-content id="contact"> ... </ion-content>

* Event Listener Code (I write this code in the angular module run function ):*

window.addEventListener('native.keyboardshow', function () {
      document.body.classList.add('keyboard-open');
      var content = angular.element(document.getElementById($state.current.name));
      content.removeClass("has-footer");
      console.log(document.body.classList);
    });

window.addEventListener('native.keyboardhide', function () {
      var content = angular.element(document.getElementById($state.current.name));
      content.addClass("has-footer");
      document.body.classList.remove('keyboard-open');
      console.log(document.body.classList);
    });

Let me notice if it's not work.
Sorry for my super awesome english.

[VinceOPS]

Still having this issue using ion-content and ionic 1.3, iOs 9.2 on an iPhone 6

[ghadeer-io]

Does this work?

<ion-content has-bouncing="false" scroll="false">

[VinceOPS]

The issue is: I need the scrolling feature. Setting overflow-y as hidden or disabling scroll is not possible... (as it prevents user from scrolling the content of my view)

[SebastianSchirmer]

@VinceOPS Have you tried these 2 solution proposals from above yet?
1) https://github.com/driftyco/ionic/issues/4849#issuecomment-177859726
2) https://github.com/driftyco/ionic/issues/4849#issuecomment-182915560

If not, maybe the below code snippet which shows a directive function we are using to circumvent the blank screen issue works for you as well..

/* @ngInject */
function qyToggleOverflowScroll($timeout, $window, qyIonicReady) {
    var directive = {
        restrict: 'A',
        link: link
    };
    return directive;

    function link(scope, element, attrs) {
        var domElement = element[0];

        qyIonicReady().then(function onQyIonicReady() {
            $window.addEventListener('native.keyboardshow', handleKeyboardShow);
            $window.addEventListener('native.keyboardhide', handleKeyboardHide);

            // remove event listener on destroy
            scope.$on('$destroy', removeKeyboardHandlerListener);

            function handleKeyboardShow() {
                console.log('qyOverflowScrollToggle keyboard show: ELEMENT CLASS LIST: '
                    + domElement.classList.toString());
                // iOS or Android full screen
                var isIosOrAndroidFullScreen
                    = Config.OS.isIOS || (Config.OS.isAndroid && ionic.Platform.isFullScreen);

                if (isIosOrAndroidFullScreen) {
                    // wrap in timeout to avoid screen flicker
                    //$timeout(function () {
                    console.log('qyOverflowScrollToggle: '
                        + 'keyboard is shown, set overflow-y to: scroll');
                    domElement.style.overflowY = 'hidden';
                    //element.css('overflow-y', 'hidden');
                    //element.css('-webkit-overflow-scrolling', 'auto');
                    //});

                    $timeout(function setOverflowYToScrollIfNeeded() {
                        var scrollerHeight = element.height();
                        var scrollerContentHeight = domElement.scrollHeight;

                        // if scroller contains enough content to enable scrolling
                        if (scrollerContentHeight > scrollerHeight + 1) {
                            console.log('qyOverflowScrollToggle keyboard show: '
                                        + 'scroller height / scroller content height: '
                                        + scrollerHeight
                                        + ' / '
                                        + scrollerContentHeight);

                            console.log('qyOverflowScrollToggle keyboard show: '
                                        + 'content larger than scroller, set overflow-y to: scroll');
                            domElement.style.overflowY = 'scroll';
                            //element.css('overflow-y', 'scroll');
                            //element.css('-webkit-overflow-scrolling', 'touch');
                        }
                    }, 400);
                }
            }

            function handleKeyboardHide() {
                console.log('qyOverflowScrollToggle keyboard hide: ELEMENT CLASS LIST: '
                    + domElement.classList.toString());
                //// iOS or Android full screen
                var isIosOrAndroidFullScreen
                    = Config.OS.isIOS || (Config.OS.isAndroid && ionic.Platform.isFullScreen);

                if (isIosOrAndroidFullScreen) {
                    // wrap in timeout to avoid screen flicker
                    //$timeout(function () {
                    element.css('overflow-y', 'hidden');
                    element.css('-webkit-overflow-scrolling', 'auto');
                    //});

                    $timeout(function setOverflowYToScrollIfNeeded() {
                        //var scrollerHeight = element.height();
                        var scrollerHeight = domElement.clientHeight;
                        var scrollerContentHeight = domElement.scrollHeight;

                        console.log('qyOverflowScrollToggle keyboard hide: '
                            + 'scroller height / scroller content height: '
                            + scrollerHeight
                            + ' / '
                            + scrollerContentHeight);

                        // if scroller contains enough content to enable scrolling
                        if (scrollerContentHeight > scrollerHeight + 1) {
                            console.log('qyOverflowScrollToggle keyboard hide: '
                                + 'content larger than scroller, set overflow-y to: scroll');
                            element.css('-webkit-overflow-scrolling', 'touch');
                            element.css('overflow-y', 'scroll');
                        }
                    }, 400);
                }
            }

            function removeKeyboardHandlerListener() {
                $window.removeEventListener('native.keyboardshow', handleKeyboardShow);
                $window.removeEventListener('native.keyboardshow', handleKeyboardHide);
            }
        });
    }
}

It might also help you looking at my comment to another issues some time ago here: https://github.com/driftyco/ionic/issues/4645#issuecomment-165884959

[VinceOPS]

@leschirmeur Hi! Thanks for your help! I ended doing something else: I fixed the "bottom" positioning of my elements (the ones that were disappearing). It's quite fine is my context/layout.

[shivenigma]

This issue is driving me crazy, How did the team let this issue without fixing this at first hand. I made ugly hacks and those hacks affecting other parts of my app in android and ios. I am going to think about using ionic in my next app, its features are great but have fundamental flaws like this.

[SebastianSchirmer]

@shivenigma Try the directive I posted above on the element. It's working quite well for us, no blank screen issues anymore. Pasting updated code below, which removes screen flicker when hiding keyboard.

        .module('quiply')
        .directive('qyToggleOverflowScroll', qyToggleOverflowScroll);

/* @ngInject */
    function qyToggleOverflowScroll($timeout, $window, qyIonicReady) {
        var directive = {
            restrict: 'A',
            link: link
        };
        return directive;

        function link(scope, element, attrs) {
            var domElement = element[0];

            qyIonicReady().then(function onQyIonicReady() {
                $window.addEventListener('native.keyboardshow', handleKeyboardShow);
                $window.addEventListener('native.keyboardhide', handleKeyboardHide);

                // remove event listener on destroy
                scope.$on('$destroy', removeKeyboardHandlerListener);

                function handleKeyboardShow() {
                    console.log('qyOverflowScrollToggle keyboard show: ELEMENT CLASS LIST: '
                        + domElement.classList.toString());
                    // iOS or Android full screen
                    var isIosOrAndroidFullScreen
                        = Config.OS.isIOS || (Config.OS.isAndroid && ionic.Platform.isFullScreen);

                    if (isIosOrAndroidFullScreen) {
                        console.log('qyOverflowScrollToggle: '
                            + 'keyboard is shown, set overflow-y to: scroll');
                        domElement.style.overflowY = 'hidden';
                        // set -webkit-overflow-scrolling to auto for having non-momentum scrolling if
                        // keyboard is up. Setting it to touch causes screen flicker when closing keyboard
                        domElement.style.webkitOverflowScrolling = 'auto';

                        $timeout(function setOverflowYToScrollIfNeeded() {
                            var scrollerHeight = element.height();
                            var scrollerContentHeight = domElement.scrollHeight;

                            // if scroller contains enough content to enable scrolling
                            if (scrollerContentHeight > scrollerHeight + 1) {
                                console.log('qyOverflowScrollToggle keyboard show: '
                                            + 'scroller height / scroller content height: '
                                            + scrollerHeight
                                            + ' / '
                                            + scrollerContentHeight);

                                console.log('qyOverflowScrollToggle keyboard show: '
                                            + 'content larger than scroller, set overflow-y to: scroll');
                                domElement.style.overflowY = 'scroll';
                                // no need to set -webkit-overflow-scrolling as it should remain with value auto
                                // whenever keyboard is up. We disable momentum scrolling when keyboard is up.
                            }
                        }, 400);
                    }
                }

                function handleKeyboardHide() {
                    console.log('qyOverflowScrollToggle keyboard hide: ELEMENT CLASS LIST: '
                        + domElement.classList.toString());
                    //// iOS or Android full screen
                    var isIosOrAndroidFullScreen
                        = Config.OS.isIOS || (Config.OS.isAndroid && ionic.Platform.isFullScreen);

                    if (isIosOrAndroidFullScreen) {
                        domElement.style.overflowY = 'hidden';
                        // set -webkit-overflow-scrolling to auto for keyboard transition
                        domElement.style.webkitOverflowScrolling = 'auto';

                        $timeout(function setOverflowYToScrollIfNeeded() {
                            var scrollerHeight = domElement.clientHeight;
                            var scrollerContentHeight = domElement.scrollHeight;

                            console.log('qyOverflowScrollToggle keyboard hide: '
                                + 'scroller height / scroller content height: '
                                + scrollerHeight
                                + ' / '
                                + scrollerContentHeight);

                            // if scroller contains enough content to enable scrolling
                            if (scrollerContentHeight > scrollerHeight + 1) {
                                console.log('qyOverflowScrollToggle keyboard hide: '
                                    + 'content larger than scroller, set overflow-y to: scroll');
                                domElement.style.overflowY = 'scroll';
                                // set -webkit-overflow-scrolling to touch for default momentum scrolling if
                                // keyboard is not up
                                domElement.style.webkitOverflowScrolling = 'touch';
                            }
                        }, 400);
                    }
                }

                function removeKeyboardHandlerListener() {
                    $window.removeEventListener('native.keyboardshow', handleKeyboardShow);
                    $window.removeEventListener('native.keyboardhide', handleKeyboardHide);
                }
            });
        }
    }

[shivenigma]

@leschirmeur on which element I should use this directive? ion-content?

[SebastianSchirmer]

@shivenigma yes

[zanemcca]

I tried @leschirmeur solution but it did not work for me.
@mlynch Can this issue please be reopened because it is definitely not fixed. This makes for a very poor UX which should give it some priority but it seems to be ignored.

I think it is likely related to this issue in ionic-plugin-keyboard.

[shivenigma]

Unknown provider: qyIonicReadyProvider <- qyIonicReady <- qyToggleOverflowScrollDirective

is there something you missed to give me.? @leschirmeur

[SebastianSchirmer]

@shivenigma qyIonicReady is just a service wrapping $ionicPlatform.ready(). So you might just use this ready() function instead of the service. However, if you want to go for the service, here it is:

        .module('quiply')
        .factory('qyIonicReady', qyIonicReady);

    /**
     * Workaround for silently ignored callbacks.
     *
     * Details see http://stealthcode.co/multiple-calls-to-ionicplatform-ready/
     */
    /* @ngInject */
    function qyIonicReady($ionicPlatform) {
        var readyPromise;

        return function () {
            if (!readyPromise) {
                readyPromise = $ionicPlatform.ready();
            }
            return readyPromise;
        };
    }

[shivenigma]

sorry to disturb you again, but I am totally new to ionic and can't get this directive to work. I am getting the following error.

Can't find variable: Config

what is Config, is it ionic default or something you wrote for yourself? @leeschmidt4

[SebastianSchirmer]

@shivenigma Just replace the Config.xxx statements with functions offered by ionic.Platform (http://ionicframework.com/docs/api/utility/ionic.Platform/).

[shivenigma]

@leeschmidt4 Thanks for your patience and kindness for helping me, you saved me from lot of the work I have to do in order to solve this issue, If you could make it as an individual directive and release it as a support for ionic, I'll be glad to contribute and improve if there are anyways to help you. Considering making this as an individual directive without your internal dependencies, I think lot of people needs this. Thanks a ton buddy, I solved the issue, If you have any known side effects of this please let me know. Thanks again.

[lucasarts321]

@leschirmeur i love you bro thanks works like a charm; own you a beer !

[SebastianSchirmer]

Glad to hear that, @lucasarts321 :-)

[mbcooper]

My main view has

I get an error:
TypeError: o.height is not a function. (In 'o.height()', 'o.height' is undefined) (caused by "undefined")

when I use the qyToggleOverflowScroll directive.
I see you did not use .height() in the closing function @lucasarts321

[SebastianSchirmer]

@mbcooper Are you using jQuery? I guess not, the directive code requires jQuery to work. Otherwise you'd need to modify according to your needs...

[mbcooper]

ugh

[anilking]

it will avid the blank or white screen

add this two attributes to ion-content padding="true" overflow-scroll="false"

it is working for me

[edesaintchamas]

The white screen comes from a css redraw issue apparently.

We have found a quick workaround: we have created a directive that forces the browser to redraw the ion-content element every 30ms.

Here is the directive:

var app = angular.module('myapp');
app.directive('keyboardCssRedraw', function($interval){
    return {
        restrict: 'A',
        link: link
    };

    function link(scope, element, attrs) {
        var interval = setInterval(function(){
            redraw(element[0]);
        }, 30);
        scope.$on('$destroy', function(){
            clearInterval(interval);
        });
    }

    // force redraw
    function redraw(element) {
        element.style.zIndex = 1;
        element.offsetHeight;
        element.style.zIndex = '';
    }
});

Apply directive:

<ion-content keyboard-css-redraw>

This solution is a bit dirty as we constantly redraw the element. As it seems we have tackle the issue, it would be great if some ionic expert could help rewriting this code in a proper "ionic/angular" way :)

[demirag]

After long nightmares, in version 1.3.1, adding overflow-scroll="false" to <ion-content> elements fixed almost all my problems.

[DanielWSP]

Thank you @demirag this saved the day!

[nstokoe]

Bug is definitely still in ionic 1.3.

I didn't want to have to set overflow-scroll false on all my ion-content elements or use the ionicConfigProvider to disable native scroll (since js scrolling has other issues), so I just added back this snippet of css that was removed in 1.3.0 https://github.com/driftyco/ionic/commit/aec6598d:

.overflow-scroll {
  &.keyboard-up:not(.keyboard-up-confirm) {
    overflow: hidden;
  }
}

[ScottTheriault]

I know I am a little late, but here's my two cents.

turning off overflow-scroll seamed to work, but I prefer keeping the native scrolling on.

So I did something similar to @edesaintchamas but used ionic-plugin-keyboard to make it a bit more efficient

redrawState: function() {
    stateId = $ionicHistory.currentView().stateId;
    element = $("[state='" + stateId + "'] ion-content")[0];

    element.style.zIndex = 1;
    element.offsetHeight;
    element.style.zIndex = '';
}

window.addEventListener('native.keyboardshow', redrawState);
window.addEventListener('native.keyboardhide', redrawState);`

And yes, I know you shouldn't use jQuery with ionic, but it is what it is.

[Khrystyna]

Still reproducible for me. Thanks @Lsozke for solution! Replacing <ion-content> with <ion-scroll> works. Though, I had to add also class "hide-on-keyboard-open" to elements above my textarea to fit it into screen while typing as keyboard takes half of a screen.

[udithaPS]

Solved by replacing <ion-content> with <ion-scroll>

[sryze]

Bug still exists in Ionic 1.3.1 on iOS 10.2. Android works ok.

[almothafar]

Bug still exists in Ionic 1.3.2 for iOS 9 and 10, Android is working good.

[almothafar]

@mlynch may you re-open this please?

[gregor-srdic]

I also have this problem in iOs with ionic 1, overflow-scroll="true" on ion-content helps,
but then the min-height=100% does not work, so I can not position the form in the middle of the screen :S

edit: @nstokoe solution seems to work for me, thanks!

[VinceOPS]

This bug still exists on iOS 10.2+ and ionic 1.3.2, when using Native scrolling (overflow-scroll set to true, or JS Scrolling globally disabled).

Here's my _almost-workaround_, inspired by @nstokoe 's suggestion:

.overflow-scroll {
  &.keyboard-up:not(.keyboard-up-confirm) {
    -webkit-overflow-scrolling: auto;
  }
}

It solves the issue, the same way, but does not "block" scrolling (overflow: hidden does prevent from scrolling). To be more specific, the user can scroll if he does not touch a keyboard inputs when he starts the gesture.

In scrollViewNative.js (ionic v1), you can see this at two different places (keyboard opening and keyboard closing):

              /*
              if (ionic.Platform.isIOS()) {
                // Force redraw to avoid disappearing content
                var disp = container.style.display;
                container.style.display = 'none';
                var trick = container.offsetHeight;
                container.style.display = disp;
              }
              */

I assume it has been left commented/unused because this bug can still cause Crashes, even if forced-redrawing almost "hides" it (yet it does not avoid flickering :-D). I didn't have a look at the keyboard plugin code, but I guess that something is wrong inside, if it can lead the app to crash.

[ugosan]

I've figured out that in the case of our app, what was triggering this behaviour was a swipe gesture, so adding $ionicConfigProvider.views.swipeBackEnabled(false); solved for us.

[rkaveski]

I did a workaround that worked for me:

CSS:

.platform-ios div.scroll {
    height: 101%;
}

View:
<ion-content scrollbar-y="false">

Seems like <ion-content> needs his content to overflow. I inserted a lot of <p>Lorem Ipsum</p>, then I cleared the CSS rule and everything works fine, because the <p> sequence causes the content overflow.

[atasciuc]

From my research it looks that all of this related with the keyboard transition. When elements have absolute positioning and -webkit-transform: translate3d(0,0,0); set while keyboard is animated the z-index gets messed up. Transform is used to kick the GPU for transitions. For more info look here: here. By removing transform everything works as expected.

[VinceOPS]

I finally got this fixed/working on iOS using native scrolling and forcing the position of modal-backdrop (the parent of any modal container) to absolute instead of fixed.

@media (max-width: $modal-inset-mode-break-point - 1) {
    .modal-backdrop.active {
        position: absolute !important;
    }
}

The media-query is made for everything beyond the resolution which is considered as a Tablet, leading to inset/centered modal (currently 680px, by default, in _variables.scss). In that case, Smartphones.
I only target .active modal as the other one are not visible, thus, not relevant.

[niyando]

I had this issue with native scrolling and found that it was limiting the height of the ion-content whenever the keyboard was up. This caused my view to appear truncated (half blank) unless you close the keyboard. I solved it by force setting the height to auto. Hope this helps.

.keyboard-up{
  height: auto !important;
}

[kchahiyodotcom]

adding ion-scroll inside ion-content solved my issue

[glemiere]

Hey!
Just in case someone runs into this issue (it can happens with ionic 1, 2, and even 3), the proper way to fix it is to remove cordova-plugin-keyboard, and installing ionic-plugin-keyboard instead.

Enjoy!

[mspado]

@glemiere Are you sure thats all you changed? I'm having the issue with the viewport not resizing back to original size after the keyboard is closed. Have completely uninstalled and removed cordova-plugin-keyboard and only ionic keyboard is in there. Still having the issue.

Whereas if I install the 'tabs' default app it works perfectly with the keyboard.

[mspado]

Hi,

I found the cause of this very frustrating issue for me was:

this.statusBar.overlaysWebView(false);

...that's it. Just make sure you don't call that.

[dogindot]

Removing -webkit-overflow-scrolling: touch; or set it to auto was fixing this behavior.
Since it was only occurring on the login page, setting this style especially for the login view was helping me.

[adamsolomon1986]

Hope this helps anyone. In my case, I just set the footer background to the ion-content background color and the issue disappeared

[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.