IOS 8 Scrolling to focused input / Scrolling whilst input is focused

[joemcelroy]

Hi there,

platform: IOS8 safari - not using the cordova-keyboard plugin as this is a mobile website
Ionic: beta 12

Im getting 2 issues:

• when the user focuses on an input, ionic scroll-view will scroll where the input is being obscured by the keyboard.
• When the user scrolls whilst input is focused, the scrolling experience isn't great, with the top navigation disappearing.

Heres a video showing these issues: https://vid.me/nMU

Works perfectly on iOS7.

Could be related to this issue: #2256 where now the window shifts where before it did not. Is there any way to do disableScrolling but for mobile safari?

Thanks

[dhaligas]

I am getting the same issue. This is a web site not native so I cannot use the disable scroll keyboard plugin.

[joemcelroy]

i've got a code pen to show this issue in action: http://codepen.io/phoey/pen/seAkK

[dhaligas]

Any word on this from the ionic team?

[mhartington]

Hey there guys. So since is with mobile safari and not a compiled app, there's not going to be a whole lot that we can do.

Ionic is meant for compiled hybrid apps because we have a lot more control of things. Not the case in mobile safari.

[PeBu]

Hey guys,
i think it's the Scroll Evennt change in iOS8 Safari. (http://developer.telerik.com/featured/scroll-event-change-ios-8-big-deal/?utm_source=mobilewebweekly&utm_medium=email) - and also in the new WKWebView for cordova/phonegap

I have the same issue on my web-app in Safari.

A Workaround that helps me:

i changed in "keyboard.js"

function keyboardBrowserFocusIn(e) {
if( !e.target || !ionic.tap.isTextInput(e.target) || ionic.tap.isDateInput(e.target) || !keyboardIsWithinScroll(e.target) ) return;
....

to

function keyboardBrowserFocusIn(e) {
if( !e.target || keyboardActiveElement !== e.target || !ionic.tap.isTextInput(e.target) || ionic.tap.isDateInput(e.target) || !keyboardIsWithinScroll(e.target) ) return;
...

... that solves my problem

[xdissent]

Had same issue (compiled app, not mobile safari) and the fix from @PeBu worked for me.

[phil74]

Same issue here on an iOs 8 compiled app - works fine with iOs 7.x...
Seems to be a regression.
The fix from @PeBu works. Any chance to have it integrated in a next ionic release ?

[jfbourne]

@PeBu fix works but then the navigation bar hide behind the status bar on a compiled app.

[ChristianBetts]

What is the @PeBu fix?

Edit: Looks to be compiled app only, not Mobile Safari :'-(

Anyone able to help?

Thanks

[jfbourne]

@ChristianBetts like I said above @PeBu fix will work but you will have the issue that your navigation bar will scroll up and hide underneath status bar when the keyboards comes up. If you have no problem with that just go into ionic\js\ionic.bundle.js and search for this line

keyboardBrowserFocusIn

then replace:

if( !e.target || !ionic.tap.isTextInput(e.target) || ionic.tap.isDateInput(e.target) || !keyboardIsWithinScroll(e.target) ) return;

with

if( !e.target || keyboardActiveElement !== e.target || !ionic.tap.isTextInput(e.target) || ionic.tap.isDateInput(e.target) || !keyboardIsWithinScroll(e.target) ) return;

MY SOLUTION:

Because I did not like the fact that the keyboard was making my nav bar to be hidden I decided to disable keyboard scrolling when entering the view with this issue and disabling keyboard scrolling when exiting that view. See example below

.state('app.help', {
onEnter: function($ionicPlatform){

    $ionicPlatform.ready(function() {
      if(window.cordova ){
         cordova.plugins.Keyboard.disableScroll(true);
      }

   }); 
  },
  onExit: function($ionicPlatform){
    $ionicPlatform.ready(function() {
       if(window.cordova){
         cordova.plugins.Keyboard.disableScroll(false);

        }
    });
  }
})

[evgenium]

Hi everyone! I have the same trouble on bootstrap-based site. It would really help if someone got a solution that can be used on non-ionic website. I googled like hell but found nothing. The only info real close to my issue is the one you are talking about, but I'm not good enough in JS to dig it from ionic code. Any help would be appreciated!

[tlancina]

Unfortunately on Safari there is not a lot we can do to prevent the browser from automatically scrolling inputs into view. Rather than try and battle the browser on this, I've added ionic.keyboard.disable(), which will allow you to easily disable Ionic's keyboard adjustments. You can re-enable them with ionic.keyboard.enable(). If for some reason you need to disable/re-enable the keyboard code in a web view I would suggest doing each of them with cordova.plugins.Keyboard.disableScroll(false) and cordova.plugins.Keyboard.disableScroll(true), respectively.

[torleifs]

This seems to be working fine for me:

$scope.openPopover = function($event, id) {
    ionic.keyboard.disable();
    $scope.popovers[id].show($event); 
};

 // Execute action on hide popover
$scope.$on('popover.hidden', function() {
    ionic.keyboard.enable();
});

Thanks tlancina!

[clawish]

@tlancina thank you for that hotfix...

[smamit27]

@torleifs .I am working on Mobile Portal and I am facing focused input / Scrolling whilst issue.
I tried your code in my Portal. Error is ionic.keyboard.disable(); is not a function ?
please suggest me.It is not a mobileApp.It is web application using ionic framework

[jacksonrayhamilton]

In our app, we experienced the same issue. Somewhere in our codebase we found this snippet of code, removed it, and the "jerkiness" went away.

document.addEventListener('focusin', function (event) {
    if (event.target.tagName === 'INPUT') {
        document.body.scrollTop = 0;
    }
});

I suggest grepping your scripts, you may find something similar.

I expect we added this to prevent input focus from scrolling the screen. Perhaps document.body.scrollTop = 0; happened quickly enough in iOS 7 to negate the scrolling, but in iOS 8 it seems to be delayed just long enough for the whole page to shift. Guess we'll have to settle for the default OS behavior until another fix is discovered.

[jason-engage]

Using ionic.keyboard.disable(); prevents the view's 'jerky jump' when selecting an input field, which is good, however the entire header slides up above the status bar, and creates another problem. This form/input/view/keyboard issue on IOS is pretty bad. I've tried alot of tricks to get around it, however fixing one issue leads to another.

[tlancina]

@jason-engage, assuming you're not using Cordova, have you tried setting overflow-scroll=true?

[jason-engage]

@tlancina what do you mean not using cordova?... I'm building a cordova app. I tried adding overflow-scroll=true to my ion-content, and removed the ionic.keyboard.disable(). It also stops the jerking, however, the entire view scrolls up thru the status bar, and I lose the header. It also has at least one or two other negative side-effects. Btw, this issue is within an ion-modal-view. I've even tried setting has-bounce to false, using window.cordova.plugins.Keyboard.disableScroll(true), and calling an scrollDelegate.resize() after the keyboard shows up. Most of them either do nothing, or shift the problem to another problem.

I'm planning on packaging my codebase and reselling it in your soon-to-be-launched theme store. Perhaps you guys can look at it in person, and install it on an iPhone - this scrolling bug seems to be the last major issue it has. I should have it ready by next week, at which time I'll shoot Perry an email. Cheers

[tlancina]

@jason-engage this issue was for mobile Safari, using cordova.plugins.Keyboard.disableScroll(true) should prevent the behavior you're seeing.

[eroh92]

Myself and several others are having an issue where cordova.plugins.Keyboard.disableScroll(true) isn't working and we're getting the same side effects as above.
ionic-team/ionic-plugin-keyboard#90

[jason-engage]

For me, the problem with this bug is that its happening on IOS builds only. The web browser version and Android version work fine, so no code-pen can show the issue directly, that I know of. If I had some long forms, this would be a very big deal, because it would ruin the user experience, because it 1) forces the header to disappear 2) causes overscrolling 3) causes bouncing and jerking. However I'm able to make due atm by applying 'overflow-scroll="{{isIOS}}"' in the ion-content tag. This eliminates the initial jerking (but still leaves other issues unsolved). Getting this fixed should be a priority imo.

Here are the details that may help narrow the bug, at least in my case:
IOS 8.4
Modal View
WKWEBVIEW (not UIwebview)
iPhone 6

Here is the code I'm using in my ion-modal-view: (the problem persists across several of my short forms).

<ion-modal-view class="feedback" ng-controller="feedbackFormCtrl">

    <ion-nav-bar class="bar-dark" animation="no-animation" nav-bar-transition="none">

        <ion-nav-buttons side="primary">
            <button class="button button-clear button-close" ng-click="hideFeedbackModal()">
                Cancel
            </button>
        </ion-nav-buttons>

        <ion-nav-title>
            Submit Feedback
        </ion-nav-title>

    </ion-nav-bar>


    <form name="sendFeedbackForm" class="form" ng-submit="submitFeedbackForm(sendFeedbackForm.$valid)" novalidate>

        <ion-content overflow-scroll="{{isIOS}}" class="has-header" ng-class="{'has-footer': isBannerShowing}" delegate-handle="feedbackScroll">

            <div ng-show="sendFeedbackForm.feedbackRating.$invalid && !sendFeedbackForm.feedbackRating.$pristine" class="error-container ng-hide">A feedback is required</div>

            <div class="item item-divider rating">
                <div class="item-input">
                    <span class="input-label">Rate</span>
                    <rating ng-model="feedback.rating" max="5" required></rating>
                </div>
            </div>

            <div ng-show="sendFeedbackForm.feedbackMessage.$invalid && !sendFeedbackForm.feedbackMessage.$pristine" class="error-container ng-hide">A message is required</div>

            <div class="item">
                <label class="item-input item-floating-label">
                    <span class="input-label label-textarea">Tell us about your ideas:</span>
                    <textarea name="feedbackMessage" type="text" placeholder="What issues are you experiencing, or what features would you like to see added?" ng-model="feedback.feedback" required></textarea>
                </label>
            </div>
            <div>
                <button type="submit" class="button button-stable button-full" ng-disabled="sendFeedbackForm.$invalid">Send Feedback</button>
            </div>

        </ion-content>

    </form>

</ion-modal-view>

[tlancina]

@jason-engage thanks! I'm not seeing this on the 8.1 simulator with the WKWebView plugin, and unfortunately I'm not in a position to download the 8.4 one right now. I've asked @mhartington to take a look with the exact same project using 8.4 and he reported everything working as expected as well (keyboard plugin breaks on a breakpoint at https://github.com/driftyco/ionic-plugin-keyboard/blob/master/src/ios/IonicKeyboard.m#L108, scrollView is a WKScrollView).

Steps I took:

ionic start kb-test http://codepen.io/anon/pen/yYBYeZ && cd kb-test
ionic plugin add com.telerik.plugins.wkwebview
ionic prepare && ionic run ios #(or open it in XCode)

However from ionic-team/ionic-plugin-keyboard#90 it seems you are not alone! I would love to nail this down, is there any way you can come up with code that reproduces the issue 100% and put it in a codepen or a git repository? I know it doesn't happen in the browser, but we can scaffold new projects from codepen URLs using the Ionic CLI, so that or a repo are the fastest ways for us to get your code up and running.

Also let's move this discussion over to #90 as this issue was originally for mobile Safari.

[barkoczi]

Hi there,

I build a (home screen) web app targeting ios 9, but this bug can be seen on @Phoey video is still exist.
Latest ionic (1.1.0) and angular 1.4.7. No cordova, this is a pure web server hosted html5 app.

Tried overflow-scroll="true" on my content view, but I want to have the header not pushing out from viewport.

Any suggestion?

[dwilt]

+1 We also are using ionic for a native app via Cordova and are seeing this exact same issue. Ionic version: 1.0.0-rc.1

[mwgerson]

+1 Running as a web app (no cordova). Ionic 1.2.4, seeing this in the 9.3 simulator and on a 6s (also 9.3). Codepen here: http://codepen.io/mwg/pen/ZWXWRV (to replicate, you can hit the fullscreen codepen in safari on the simulator or from your phone: http://codepen.io/mwg/full/ZWXWRV)

@barkoczi or anyone else manage to find a workaround?

[Tobiaswk]

I can also confirm this issue. I have no workaround. Pretty significant issue!
See also #5806 which I think is related to this issue.

[linearza]

Also having an issue with this - particularly the input catching focus on scroll as shown in joemcelroy's initial video. We are also using the default cordova keyboard plugin, so for what its worth, the issue isnt limited to this plugin.

[VinceOPS]

Issue still exists with iOs 9 & 10, ionic 1.3.1

[jetma]

window.addEventListener('native.keyboardshow', function(event) {
	// IMPORTANT!! 
	$timeout(function() {
		$cordovaKeyboard.disableScroll(true);

		// find your own elements and set height to 100%
		var el = angular.element('.modal-backdrop.active ion-content');
		if (el) {
			el.css('height', '100%');
		}
	}, 100);
});

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