bug: ios, scrolling input with long text does not work the first time

[wilk-polarny]

Bug Report

Ionic version: [x] 4.11.3

Current behavior: When a text within an input field is longer than its renderable width, scrolling using the keyboard will not work in iOS (13). When I lose focus and re-enter the field again with the caret on position 0, I am able to scroll from left to right, but not back.

Expected behavior: I should be able not only to set the caret to a position on the rendered text, but I should also be able to use the caret to scroll through the whole line.

Steps to reproduce:

• Download and install the Ionic Tabs Starter (Angular)
• Enable Cordova Integration
• To be sure, upgrade cordova-ionic-webview and cordova-ionic-keyboard to the latest version.
• On any page, add an <ion-input> like below
• Build, enter a long text and try to reposition the caret to the front (index 0)

Related code:

<ion-item>
  <ion-label position="fixed">Fixed Label</ion-label>
  <ion-input clearInput placeholder="Holdy da place"></ion-input>
</ion-item>

Other information:

Ionic info:

Ionic:

   Ionic CLI                     : 5.4.15 (/Users/Wilk/.nvm/versions/node/v10.16.3/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.11.9
   @angular-devkit/build-angular : 0.801.3
   @angular-devkit/schematics    : 8.1.3
   @angular/cli                  : 8.1.3
   @ionic/angular-toolkit        : 2.1.2

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : ios 5.1.1
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.3, (and 4 other plugins)

Utility:

   cordova-res : 0.8.1
   native-run  : 0.3.0

System:

   ios-deploy : 1.9.4
   ios-sim    : 8.0.2
   NodeJS     : v10.16.3 (/Users/Wilk/.nvm/versions/node/v10.16.3/bin/node)
   npm        : 6.9.0
   OS         : macOS Catalina
   Xcode      : Xcode 11.3.1 Build version 11C504

[liamdebeasi]

Thanks for the issue. I was able to reproduce this. It looks like this bug is occurring due to the presence of an ion-label and setting --padding-start: 0 on the ion-input. Scrolling in the input seems to work if I set --padding-start: 4px on the ion-input, but scrolling seems to be slow (and it speeds up with bigger padding values). Need to investigate this more.

[wilk-polarny]

Hi, I'm currently revisiting my old issues. Just checked again - the mentioned limitations are also present in Ionic 5.

Ionic:

   Ionic CLI                     : 6.6.0 (/Users/Wilk/.nvm/versions/node/v10.16.3/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.0.7
   @angular-devkit/build-angular : 0.803.26
   @angular-devkit/schematics    : 8.3.26
   @angular/cli                  : 8.3.26
   @ionic/angular-toolkit        : 2.2.0

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : ios 5.1.1
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.2.0, (and 4 other plugins)

Utility:

   cordova-res (update available: 0.12.2) : 0.8.1
   native-run                             : 1.0.0

System:

   ios-deploy : 1.10.0
   ios-sim    : 8.0.2
   NodeJS     : v10.16.3 (/Users/Wilk/.nvm/versions/node/v10.16.3/bin/node)
   npm        : 6.9.0
   OS         : macOS Catalina
   Xcode      : Xcode 11.4.1 Build version 11E503a

[wilk-polarny]

@liamdebeasi , any news on this one? :)

[liamdebeasi]

Hi everyone,

I wanted to provide a quick update. This appears to be a bug in WebKit, the engine that powers web content on iOS. I have reported this issue to the WebKit team: https://bugs.webkit.org/show_bug.cgi?id=240575

I will close this when the underlying bug has been fixed. Thanks!