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 #4645 where I added quite an extensive comment: #4645 (comment)

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.

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

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.