bug: form validation highlight for <ion-item> displays twice

[ntorrey]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• [ ] v4.x
• [ ] v5.x
• [X] v6.x
• [ ] Nightly

Current Behavior

For certain screen resolutions, the styling of form validation for ion-inputs displays inconsistently. For example, see the difference in the red underline of the password field for these 2 zoom levels:

Normal zoom:

Zoom level of %125

I suspect it has something to do with this css styling:

:host(.item-interactive) {
    --border-width: 0 0 1px 0;
}

Expected Behavior

The form validation styling for ion-inputs should be consistent across all screen resolutions. (A single solid line)

Steps to Reproduce

1. Create a form with validation.
2. Enter invalid data
3. Observe the ion-input styling at various screen resolutions.
4. Be dismayed.

Code Reproduction URL

https://github.com/ntorrey/ionic-form-validation-styling-bug

Ionic Info

Ionic:

Ionic CLI : 6.19.1 Ionic Framework : @ionic/angular 6.1.9 @angular-devkit/build-angular : 14.0.0 @angular-devkit/schematics : 13.3.7 @angular/cli : 14.0.0 @ionic/angular-toolkit : 6.1.0

Capacitor:

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

Utility:

cordova-res : 0.15.4 native-run : 1.5.0

System:

NodeJS : v16.13.1 npm : 8.12.1 OS : Windows 10

Additional Information

No response

[ntorrey]

So it seems that this is a known issue in general with the way different browsers handle border rendering with different zoom levels, causing gaps between the borders of nested divs. I see this behavior both in chrome desktop and in chrome on android. It looks like the problem is a result of bottom-border style duplication in the elements with .item-native, .item-interactive, and .item-highlight css selectors. Not sure if there's a better way to apply validation bottom-border styles in <ion-item> elements?

[liamdebeasi]

Thanks for the report. We are shipping a simplified form control syntax in Ionic 7 which resolves this issue. We have migrations guide available for each component (input example: https://ionicframework.com/docs/v7/api/input#migrating-from-legacy-input-syntax)

Ionic 7 is currently in a public pre-release period. The work required to resolve this issue has been completed, so I am going to close this. Let me know if there are any questions.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.