perf: Form goes blank

[pikebrad]

Type: perf

Platform: ios 8 webview

I have created a form inside a Modal. When I try and scroll or click 'DONE' on the keyboard, the modal goes blank. I also testing this in a normal view state, and the same thing happens.

[mlynch]

Which version of Ionic? 1.2.2 was released just yesterday and addresses I believe this very issue

[pikebrad]

Thank you @mlynch. I am currently using 1.2.1. I will update and reply back with the results. Happy New Year, buddy and thank you.

[rodyvansambeek]

I have the same issue. also in 1.2.2. I have 4 textboxes in a list, inside an ion-content tag. On 1.2.1 when deselecting the first textbox and selecting the second, it would show a white screen. On 1.2.2 this works fine, just until I click the "Done" button above the keyboard. The page goes blank.

[rodyvansambeek]

Also, using the ionic-keyboard-plugin and hiding the accessory bar does not fix the issue. Screen goes blank after clicking away from the keyboard.

[mlynch]

@rodyvansambeek What device/platform?

[mlynch]

@rodyvansambeek if you have any more code snippets, device/platform info, etc. that would be hugely helpful. I want to get this fixed today so we can cut another release as I consider this a P0 urgent issue. Thanks.

[rodyvansambeek]

Hi max,

The platform is iPhone 5s iOS 9.2

For code snippet You could check my riktracker repository. On the first screen New game, there is the issue

Verzonden vanuit Outlook Mobilehttps://aka.ms/qtex0l

On Sat, Jan 2, 2016 at 7:02 AM -0800, "Max Lynch" <notifications@github.commailto:notifications@github.com> wrote:

@rodyvansambeekhttps://github.com/rodyvansambeek if you have any more code snippets, device/platform info, etc. that would be hugely helpful. I want to get this fixed today so we can cut another release as I consider this a P0 urgent issue. Thanks.

Reply to this email directly or view it on GitHubhttps://github.com//issues/4888#issuecomment-168397260.

[SebastianSchirmer]

Just installed 1.2.2 and having the same issue. Focus input field in modal, can't scroll anymore. In addition, tapping the input field causes the whole screen to flicker. Tried with 1.2.1 and scrolling works after focussing the same input field in modal.

[SebastianSchirmer]

$ 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.2
Ionic CLI Version: 1.7.12
Ionic App Lib Version: 0.6.5
ios-deploy version: 1.8.1
ios-sim version: 5.0.2
OS: Mac OS X El Capitan
Node Version: v0.12.7
Xcode version: Xcode 7.1.1 Build version 7B1005

[SebastianSchirmer]

iPhone 6, iOS 8.4.1

[mlynch]

@leschirmeur slightly different issue and that was a consequence of fixing the bug reported here. Are you seeing any blank screens?

[SebastianSchirmer]

trying...

[SebastianSchirmer]

@mlynch could not cause any blank screens anymore. Seems to be working.

[SebastianSchirmer]

Made some initial checks on the "does not scroll anymore"-Issue. It seems that overflow:hidden set by css class .overflow-scroll.keyboard-up:not(.keyboard-up-confirm) is causing the scroll not to work anymore. If I comment this out, scroll in modal works, even when keyboard is up. However, commenting it out causes the blank screen issue to reappear!

[rodyvansambeek]

@mlynch it seems 1.2.3 fixes the issue, I updated and cannot reproduce it anymore.

[privetr]

I had a similar problem with version 1.2.2 AND 1.2.3. When I focus on an input text (not necessarily on slides nor in a form) on a Android device, the keyboard shows up, but the rest of the page becomes white, and we can't see the input anymore.
You can see the difference on the two attached images.
At the first focus there is the bug, but then works fine.
This seems to be very urgent...

[Kannansundar]

I removed 'native scrolling' for that particular page. Using overflow-scroll="false" in ion-content. Temporarily this issue is fixed I believe.

[privetr]

@Kannansundar, Indeed, it also fixed the problem for the #4892 .
But for me it is not the right solution, because native scrolling is the main evolution of Ionic 1.2 for me...

[SebastianSchirmer]

@mlynch Just for your information, this is what we are currently using to avoid the screen becoming blank - and mitigate a few other issues:

1. Use a directive to be added to ion-content elements. This directive listens to keyboardshow and keyboardhide events, sets overflow-y to hidden, waits some time, then sets overflow-y to scroll but only if content requires scroll. Otherwise value hidden is kept. Below the our code:

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

        function link(scope, element, attrs) {
            $ionicPlatform.ready(function () {
                $window.addEventListener('native.keyboardshow', function () {
                    //// 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');
                        });

                        $timeout(function () {
                            var scrollerHeight = element.height();
                            var scrollerContentHeight = element[0].scrollHeight;

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

                                console.log('qyOverflowScrollToggle: '
                                            + 'content larger than scroller, set overflow-y to: scroll');
                                element.css('overflow-y', 'scroll');
                            }
                        }, 400);
                    }
                });

                $window.addEventListener('native.keyboardhide', function () {
                    //// 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');
                        });

                        $timeout(function () {
                            var scrollerHeight = element.height();
                            var scrollerContentHeight = element[0].scrollHeight;

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

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

2. We have commented out in ionic.js the following lines of code, to avoid screen flicker. Both, adding and removing the 'keyboard-up' class and the 'keyboard-open' class cause screen flicker in our app:

#7381:
//container.classList.add('keyboard-up');
#7485:
           //if (ionic.Platform.isIOS()) {
            //  ionic.requestAnimationFrame(function() {
            //    container.classList.remove('keyboard-up');
            //  });
            //}
#4112:
    //ionic.requestAnimationFrame(function(){
    //  document.body.classList.remove(KEYBOARD_OPEN_CSS);
    //});
#4172:
    //setTimeout(function(){
    //  document.body.classList.add(KEYBOARD_OPEN_CSS);
    //}, 400);

Regarding the 'keyboard-open' class Ionic adds to the body element, we are using a custom directive that we are adding to any element which should be hidden when the keyboard is up. Therefore we do not need the 'keyboard-open' class added to the body element anymore.

P.S: For another screen, we are using a slightly more complex approach as we do frequent scrolling based on keyboard activity which is not being considered in the directive code shown above.

Maybe this is helpful for someone struggling with similar issues...

[privetr]

Is this problem will be fixed soon ? Or do we have to use overflow-scroll="false" everywhere.......?

EDIT : even with overflow-scroll="false", everything is broken in ion-slides on open keyboard in inputs.

[niyando]

I can confirm this behaviour. Started happening for me after upgrading my iOS.
A part of the view goes blank (white) once you open the keyboard and doesn't appear until you close the keyboard.

Ionic v 1.2.4
iOS v 9.2.1
iPhone 5s

[privetr]

I hope this problem will be fixed as soon as possible. This is so critical...

[kiwox]

Hello, same problem here! And I'm working in a project that need to be published next week.
If I use just a as a container it works well and content does not disappear after keyboard hides, but if I don't wrap the screen in it doesn't take care of input position, and many of them keeps behind the keyboard.

Few minutes ago I just tried to wrap inside a but it is also breaking.

Please, we need a fix for this issue, is critical.

[tylerruby]

Can confirm, having this issue as well.

Will definitely keep an eye out for a fix!

On Feb 27, 2016, at 6:05 PM, Mariano KIWO Carrizo notifications@github.com wrote:

Hello, same problem here! And I'm working in a project that need to be published next week.
If I use just a as a container it works well and content does not disappear after keyboard hides, but if I don't wrap the screen in it doesn't take care of input position, and many of them keeps behind the keyboard.

Few minutes ago I just tried to wrap inside a but it is also breaking.

Please, we need a fix for this issue, is critical.

—
Reply to this email directly or view it on GitHub #4888 (comment).

[kiwox]

Here is a video where you can see this behavior.

https://dl.dropboxusercontent.com/u/2354023/Ionic-keyboard-bug.mp4

[kiwox]

UPDATE: After try with the problem is fixed, but I need to put them in all screens that have input fields.

[privetr]

@kiwox You mean that you found a solution ?

[kiwox]

I just added overflow-scroll="false" to all < ion-content > that has an input field.

[tpanhorst]

Setting overflow-scroll="false" on my form views fixed this for me as well. I hope they can fix this issue with javascript scrolling as well. There are some advantages to using JS scrolling, but this bug is a big disadvantage right now...

[anasbud]

A bit late to the party, but did you find a solution ?

[privetr]

Not for me... Waiting for the 1.2.5 version to see if the problem is fixed...

[iwan-uschka]

Problem seems to be fixed in 1.3.0.
See here

https://github.com/driftyco/ionic/blob/master/js/views/scrollViewNative.js#L399

and

https://github.com/driftyco/ionic/blob/master/js/views/scrollViewNative.js#L500

but it's commented out. I reactivated this code and it works. But i had to add the following CSS rule

.overflow-scroll,
.overflow-scroll.pane {
  overflow-y: auto !important;
}

to avoid content being unscrollable (sometimes) after keyboard has been shown.

[iwan-uschka]

just another fix: i had to move clearTimeout from

https://github.com/driftyco/ionic/blob/master/js/utils/keyboard.js#L313

to

https://github.com/driftyco/ionic/blob/master/js/utils/keyboard.js#L326

because in my case i have a form with a validation dialog which sets focus to an element after submitting. But this element is not an input field.

What happens:

• tap into the textfield => focusIn is fired, keyboard is shown, viewport is resized (smaller)
• submit form => focusOut is fired, keyboard is hidden
• validation failed => dialog is shown => focus is set to a non input element => focusIn is fired => clearTimeout is fired => viewport is not resized
• result: no keyboard but small viewport

I think, target of focusIn event has to be checked, before clearTimeout is fired. If you think that produces errors somewhere else, tell me. Thanks :)

[jgw96]

@privetr is this issue also fixed for you in 1.3.0? (:

[privetr]

I will need some time to test it, but if you want to close it, i will reopen it later if the problem still exists :)

[jgw96]

@privetr Alright sounds awesome!

[CapitaineJSparrow]

Problem still exists today

Cordova CLI: 6.1.1
Gulp version: CLI version 3.9.1
Gulp local: Local version 3.9.1
Ionic Framework Version: 1.3.1
Ionic CLI Version: 1.7.16
Ionic App Lib Version: 0.7.3
OS: Node Version: v4.4.4

[privetr]

I agree with @constrom the problem still exists for me in 1.3.1 version.

Please @iwan-uschka , can you give exactly the modifications you did ? Because the files don't exist anymore.

I tried the overflow-scroll="false" on , OK it works BUT this deactivates the native scrolling (for example on Chrome you can not scroll anymore with the scroll bar, which was the best advantage of it).

[iwan-uschka]

please see my last version of ionic.bundle.custom.js and compare it to the related version of ionic.bundle.js. you can use diffmerge, a simple app for comparing files, to see changes.

BUT,

i decided to go on with ionic.bundle.js because the issues weren't fixed

i added this css

.overflow-scroll,
.overflow-scroll.pane {
  overflow-y: auto !important;
}

.platform-ios {
  .scroll-content {
    > .scroll {
      min-height: 101%;
    }
  }
}

and til now i don't have any problems

if somebody is using ngDialog, here is my configuration for solving blank screen issues caused by ngDialog:

ngDialogProvider.setDefaults({
      ...,
      // iOS fix: prevent focus being set on non input fields
      // if keyboard is open and user clicks on submit button,
      // dialog appears, focus is set and blank space is
      // visible where the keyboard was shown before
      trapFocus: !_.has(window, 'cordova')
    });

[privetr]

This did not work for me (both css and modified the ionic.bundle.js file)... ON ANDROID. On Ios, I can't test it.
Is there any ionic member to help us :| ??? @jgw96

Here is a video of what is happening : https://drive.google.com/open?id=0B32vZiPnyBzTTzJhSjlJc1BRNU0

At the first focus, the problem occurs, not the next ones. But app is unusable like this...

[privetr]

And if I remove all the content of the keyboardFocusIn function (line 3865), ALL WORKS FINE.
Is it wrong to do this ?..

[iwan-uschka]

which android version do you use to test? i only had problems with iOS 9

[privetr]

I am using Android 5 and 6

[iwan-uschka]

i will keep an eye on it, but i never had problems with android before

[AshokGurram]

In iphone ionic, On tap of input fields, keyboard is showing but all fields are getting invisible.

[FrancescoMussi]

Hello guys!

I had the same exact problem for IOS.
Very weird behaviour on my form.

I have found the solution thanks to this Ionic Forum post:

https://forum.ionicframework.com/t/important-all-ionic-users-please-update-your-keyboard-plugin/46889

In short:

ionic plugin rm ionic-plugin-keyboard    
ionic plugin add ionic-plugin-keyboard

Now the form is working perfectly with all the validations and stuff.