angular / angular/components

FormField outline border wrong on Google chrome with lower zoom than 100%

Open
#24,409 2 comments 1 reaction 0 assignees View on GitHub
area: material/form-field P4
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

### Is this a regression?

- [ ] Yes, this behavior used to work in the previous version

### The previous version in which this bug was not present was

_No response_

### Description

Angular material form field outline gap border is bigger with 1px than mat-form-field-outline-start, mat-form-field-outline-end classes border.

### Reproduction

Steps to reproduce:
1. Open form field outline with google chrome
2. Set zoom to 90%
3. Take hover on form field

### Expected Behavior

Same border width on outline form field.

### Actual Behavior

![form_field_outline](https://user-images.githubusercontent.com/28343464/153829127-f5b3b80c-04a1-4525-a2bf-11b58e3df6d7.png)

### Environment

- Angular: 13.2.2
- CDK/Material: 13.2.2
- Browser(s): Google Chrome
- Operating System (e.g. Windows, macOS, Ubuntu): Windows 10

Contributor guide

Open the contributing guide

Research direction

Reproduce the outline form-field behavior in Google Chrome at 90% zoom using Angular Material 13.2.2 on Windows 10, then locate the implementation responsible for the outline gap and its border classes. Done means the outline gap and mat-form-field-outline-start/end borders have the same width during hover at reduced zoom.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.