-
Notifications
You must be signed in to change notification settings - Fork 13.5k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
IOS 8 Scrolling to focused input / Scrolling whilst input is focused #2285
Comments
I am getting the same issue. This is a web site not native so I cannot use the disable scroll keyboard plugin. |
i've got a code pen to show this issue in action: http://codepen.io/phoey/pen/seAkK |
Any word on this from the ionic team? |
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. |
Hey guys, I have the same issue on my web-app in Safari. A Workaround that helps me: i changed in "keyboard.js" function keyboardBrowserFocusIn(e) { to function keyboardBrowserFocusIn(e) { ... that solves my problem |
Had same issue (compiled app, not mobile safari) and the fix from @PeBu worked for me. |
Same issue here on an iOs 8 compiled app - works fine with iOs 7.x... |
@PeBu fix works but then the navigation bar hide behind the status bar on a compiled app. |
What is the @PeBu fix? Edit: Looks to be compiled app only, not Mobile Safari :'-( Anyone able to help? Thanks |
@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', {
|
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! |
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 |
This seems to be working fine for me:
Thanks tlancina! |
@tlancina thank you for that hotfix... |
@torleifs .I am working on Mobile Portal and I am facing focused input / Scrolling whilst issue. |
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 |
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. |
@jason-engage, assuming you're not using Cordova, have you tried setting |
@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 |
@jason-engage this issue was for mobile Safari, using |
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. |
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: Here is the code I'm using in my ion-modal-view: (the problem persists across several of my short forms).
|
@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:
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. |
Hi there, I build a (home screen) web app targeting ios 9, but this bug can be seen on @Phoey video is still exist. Tried overflow-scroll="true" on my content view, but I want to have the header not pushing out from viewport. Any suggestion? |
+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 |
+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? |
I can also confirm this issue. I have no workaround. Pretty significant issue! |
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. |
Issue still exists with iOs 9 & 10, ionic 1.3.1 |
|
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. |
Hi there,
platform: IOS8 safari - not using the cordova-keyboard plugin as this is a mobile website
Ionic: beta 12
Im getting 2 issues:
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
The text was updated successfully, but these errors were encountered: