ionic-team / ionic-team/ionic-framework

bug: ion-input placeholder overlaps with icon and jumps on focus near screen bottom when keyboard opens

Open
#30,103 1 comment 0 reactions 0 assignees View on GitHub
triage
Dominant language
TypeScript
Stars
52.7k
Forks
13.3k
Avg merge
1d 15h
Merged PRs (30d)
51

Description

### Prerequisites

- [X] I have read the [Contributing Guidelines](https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#creating-an-issue).
- [X] I agree to follow the [Code of Conduct](https://ionicframework.com/code-of-conduct).
- [X] I have searched for [existing issues](https://github.com/ionic-team/ionic-framework/issues) that already report this problem, without success.

### Ionic Framework Version

v8.x

### Current Behavior

When focusing the last `ion-input` near the bottom of the screen in a stacked layout with `labelPlacement="stacked"` and an `icon`, the placeholder or value visibly shifts to the left and overlaps the icon before resetting to the correct position. This behavior only occurs when there are enough inputs stacked to trigger Ionic’s `relocateInput` function to create space for the keyboard.

This results in a poor user experience as the input content jumps and overlaps briefly, making the interface appear unstable.

You can watch the issue here in this screen recording:
https://www.loom.com/share/da7ba040a3684ca48a807f5cfa4dd5a9?t=7&sid=6cdc995c-705b-4eed-9626-d3bdf3fedd73

### Expected Behavior

The `ion-input` should remain visually stable when focused, regardless of its position on the screen or whether the keyboard opens. The placeholder or value should not shift or overlap the icon at any point.

### Steps to Reproduce

1. Create a list of `ion-input` elements stacked in a `div`, ensuring they occupy enough vertical space to require the keyboard to push the last input into view when focused.
• Use at least 10 `ion-inputs` for reproduction.
2. Add the following properties to the `ion-input` elements:
• label with `labelPlacement="stacked"`.
• A `placeholder`.
• An `icon` in the `slot="start"`.
3. Test on a mobile device or in Google Chrome DevTools with mobile emulation enabled (e.g., iPhone SE).
• Ensure the viewport is configured so the last `ion-input` is near the bottom of the screen.
4. Alternate clicking between the labels of any input and the label of the last input.
• When clicking the label of the last input, the placeholder or value briefly shifts left, overlapping the icon, before resetting.

### Code Reproduction URL

https://stackblitz.com/edit/1ne4fk8t?file=src%2Fcomponents%2FExample.vue

### Ionic Info

Ionic:

Ionic CLI : 7.2.0 (/Users/christiangrosskopf/.nvm/versions/node/v20.18.1/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/vue 8.4.1

Capacitor:

Capacitor CLI : 6.2.0
@capacitor/android : not installed
@capacitor/core : 6.2.0
@capacitor/ios : not installed

Utility:

cordova-res : not installed globally
native-run : 2.0.1

System:

NodeJS : v20.18.1 (/Users/christiangrosskopf/.nvm/versions/node/v20.18.1/bin/node)
npm : 10.8.2
OS : macOS Unknown

### Additional Information

This issue occurs because Ionic’s `relocateInput` function applies a transform style to move the native input element out of the visible area while creating space for the keyboard. The applied transform briefly affects the input’s layout, causing the visible jump and placeholder/icon overlap.

Relevant Code: `inputEl.style.transform = `translate3d(${tx}px,${inputRelativeY}px,0) scale(0)`;`

This behavior is particularly noticeable for inputs near the bottom of the screen and does not occur on desktop screens, as relocateInput is not triggered in those environments.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.