fix(form-field): inconsistent underline height at different DPIs #11062
Conversation
mmalerba
added
pr: needs review
target: patch
googlebot
added
the
cla: yes
src/lib/form-field/form-field.scss
Outdated
| @@ -144,6 +144,8 @@ $mat-form-field-default-infix-width: 180px !default; | |||
| width: 100%; | |||
| // Need this so that the underline doesn't block the hover effect. | |||
| pointer-events: none; | |||
| // We transform the height slightly higher to fix inconsistent underline height for some DPIs. | |||
| transform: scaleY(1.0001); | |||
There was a problem hiding this comment.
This feels like one of those things where it only really helps at certain screen sizes and/or DPIs. I don't think it would hurt having it, though.
There was a problem hiding this comment.
I tested it out at different zoom levels on my desktop and retina macbook and this definitely helped make things more consistent and made the underlines not disappear on zoom levels between 50% and 100%
crisbeto
added
pr: lgtm
action: merge
src/lib/form-field/form-field.scss
Outdated
| @@ -144,6 +144,8 @@ $mat-form-field-default-infix-width: 180px !default; | |||
| width: 100%; | |||
| // Need this so that the underline doesn't block the hover effect. | |||
| pointer-events: none; | |||
| // We transform the height slightly higher to fix inconsistent underline height for some DPIs. | |||
| transform: scaleY(1.0001); | |||
There was a problem hiding this comment.
Are you able to elaborate on why adding this scale resolves the issue?
There was a problem hiding this comment.
At zoom levels between 50% and 100% some of the form-fields would lose their underline and some would have 1px underline. It seemec related to fractional pixels in some way (e.g. underlines with their top at x.7px were fine, but underlines at x.8px disappeared). The exact fractions that worked or didn't work seemed to depend on the users resolution and zoom level.
This was basically just a hunch "hey maybe making the underline barely thicker will somehow help." And on all the screens and zoom levels I tested it did indeed fix the problem. It also fixed the case where you're zoomed in to >100% and the underlines would have inconsistent thickness.
There was a problem hiding this comment.
Add the gist of that to the comment?
josephperrott
added
pr: needs review
and removed
pr: lgtm
action: merge
mmalerba
added
pr: lgtm
action: merge
|
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
No description provided.