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

The ion-input-password-toggle component causes layout shifts when it's parent ion-input has a disabled or readonly property

Affect is particularly visible when ion-input has labelPlacement="stacked"

Expected Behavior

Layout should not shift

Steps to Reproduce

1. Go to Code Reproduction URL
2. Click on Submit
3. Observe layout shift

Code Reproduction URL

https://stackblitz.com/edit/waav8e?file=src%2Fmain.tsx

Ionic Info

Ionic:

Ionic CLI : 7.2.0

Utility:

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

System:

NodeJS : v18.18.2
npm : 9.8.1
OS : Windows 10

Additional Information

Issue is caused because the ion-input-password-toggle component is larger than ion-input

The display: none css property may be replaced by visibility: hidden instead here: