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

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing 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.