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

+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">

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;
  }
}

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

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

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.

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

Does this work?

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

Glad to hear that, @lucasarts321 😃

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

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;
}

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.

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.

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 😄). 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.

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 😃

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.

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.

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

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.