Ionic-framework: Input Cursor Bugs When Scrolling

Created on 27 Sep 2017 · 15Comments · Source: ionic-team/ionic-framework

Ionic version: (check one with "x")
(For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1)
[ ] 2.x
[x] 3.x
[ ] 4.x

I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request

Current behavior:

The input cursor is out of place, freezing, jiggering and overlapping with header while scrolling.
See this video for the issue in action.

Expected behavior:

For the input cursor to behave normally.

Steps to reproduce:

Related code:
Here is the reproducible repo. This repo is just a sidemenu starting project with inputs copied form the Input's official doc

More Info:
The input cursor issue is also present in emulators as well.
Moreover, the IOS emulators(tried many) won't show keyboard again after closing it once but this keyboard issue is not present in the device.

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

cli packages: (/Users/tonsu/.nvm/versions/node/v8.4.0/lib/node_modules)

    @ionic/cli-utils  : 1.12.0
    ionic (Ionic CLI) : 3.12.0

global packages:

    cordova (Cordova CLI) : 7.0.1

local packages:

    @ionic/app-scripts : 2.1.4
    Cordova Platforms  : android 6.2.3 ios 4.4.0
    Ionic Framework    : ionic-angular 3.6.1

System:

    Android SDK Tools : 26.0.2
    ios-deploy        : 1.9.2
    ios-sim           : 6.1.2
    Node              : v8.4.0
    npm               : 5.3.0
    OS                : macOS Sierra
    Xcode             : Xcode 9.0 Build version 9A235

Misc:

    backend : legacy

Source

tsupol

Most helpful comment

I have the same problem

mqasem92 on 28 Sep 2017

👍9

All 15 comments

Hello! Thank you for opening an issue with us!

I was able to duplicate the scrolling / cursor issue with both UIWebView and WKWebView.

I was not able to duplicate the keyboard issue in the emulator at all, however.

Thank you for using Ionic

kensodemann on 27 Sep 2017

I have the same problem

mqasem92 on 28 Sep 2017

👍9

Same for me. This look not very nice.

ionut-movila on 6 Oct 2017

I have same problem only on android

SquallX on 5 Nov 2017

Also seeing this and getting numerous customer complaints. All iOS11 so far. I suspect it has something to do with viewport-fit=cover added to the meta viewport tag for iPhoneX support.

mikewagz on 9 Nov 2017

No, this is a bug that has been present on both UIWebview and WKWebview for ages, at least since iOS 7. It is also present in Safari. Has nothing to do with meta tags but with the inertia scrolling on iOS.

danielcrk on 10 Nov 2017

Any plans to fix this?

RedStarThrower on 18 Jan 2018

Up ! did you found a workaround ? Who maintains wkwebview ? Are they Watching community bugs report ?

Aarbel on 18 Jan 2018

@kensodemann This is a very unappealing bug. Our clients don't want a cursor sliding across the page. I just tested a blank project with a UIWebView and did not reproduce this bug but it is reproduceable in Ionic. I think this bug needs a lot more attention.

jasekiw on 21 Mar 2018

👍3

Did anyone manage to fix that?

Ahmed-Masoud-O on 25 Mar 2018

👍1

The problem comes from Webkit and Apple WKWebview. (Webkit is also maintained by Google)
Anyone knows someone in the Webkit team ? (put their github and twitter accounts here, we will tweet them as long as it's not fixed, this issue has 5 years old)

Links :

Aarbel on 26 Mar 2018

Is there a solution for this issue ?

kirtipriya on 27 Jul 2018

I see the same issue.

MrDrProfX on 19 Sep 2018

This issue has been automatically identified as an Ionic 3 issue. We recently moved Ionic 3 to its own repository. I am moving this issue to the repository for Ionic 3. Please track this issue over there.

If I've made a mistake, and if this issue is still relevant to Ionic 4, please let the Ionic Framework team know!

Thank you for using Ionic!