[Floating Labels] Blurred labels in Chrome

[mptyspace]

trafficstars

Bug report

In Chrome, the floating label on for instance text fields is blurred.

Steps to reproduce

1. Open Chrome & Firefox
2. Go to https://material-components.github.io/material-components-web-catalog/#/component/text-field on both browsers
3. Click in the demo text field, and witness a blurred label in Chrome.

Actual behavior

Floating labels are blurred in Chrome.

Expected behavior

Floating labels should be easily readable in Chrome.

Screenshots

Your Environment:

Software	Version(s)
Browser	Firefox 68.7.0esr
Browser 2	Chrome 80.0.3987.163
Operating System	Debian 9

Additional context

Possible solution

As far as I know this is caused by the css related to transform.

[HarlesPilter]

Can we bump this. Still happens and is due to transform being something like transform: translateY(-33.25px) scale(1)

[m0wglii]

Can confirm. Also happens to me with examples from material.angular.io/. I tried Chrome and Edge.

[Frankitch]

This issue is still present in angular material v15 (MDC). It can be checked on angular material docs: https://material.angular.io/components/input/overview But wierdly, this does not happen on all inputs in docs examples: See how the first floating label is blurry and not the second one. It looks like the issue occurs when a placeholder is set beforehand. On Firefox, both are sharp.

Some solutions are explored here but no one really works for me.

[Bschitter]

I'm also having this issue with Angular Material v15 MDC.

I remember having this problem in the early versions of Angular Material.

According to the examples on the website, it seems to be present in Angular Material v5, v6, v7, v8, v9, v10, v11, v15 (e.g. v11 https://v11.material.angular.io/components/input/overview) and also in v16 (next) but not in v12, v13, v14 (e.g. v14 https://v14.material.angular.io/components/input/overview) or v15 with legacy components.

[EdWood1994]

The same here after migrating from v14 to v15. I noticed few things:

• the reason is probaly transform: translateY(-50%) on .mdc-text-field .mdc-floating-label
• when I hide form with fields and display the form after some action (click on button for example), it displays correctly
• it looks good when I create new project

[robmv]

* the reason is probaly `transform: translateY(-50%)` on `.mdc-text-field .mdc-floating-label`

Partially, if the font size of the field makes the parent height an odd value, 50% isn't an integer so the label, when not floating, is blurred in Chrome. I have a compact theme that uses smaller sizes in order to help transactional kind of users that use cheap low resolution screens. I had to resort to use a font size like 14.21px instead of an integer number just to make Chrome generate an even height for the label container, and workaround this.

I still looking for a workaround for the blurry label when it is translated to the top with a non integer offset. I wish the round CSS function were already o many browsers. Chrome has too many bugs that end with blurry text.

[Spawnrad]

I have exactly the same issue on on a select when i deselect the option the label become blur I think too its due to transform: translateY(-50%)on.mdc-text-field .mdc-floating-label`

[velval]

Same here. Using Material v15. It only happens on Chrome. As @Frankitch mentioned you can see it on the material documentation. What I have found is that only happens on matInput when using [(ngModel)]. If you use a formControl it doesn't happen.

[Bschitter]

Same here. Using Material v15. It only happens on Chrome. As @Frankitch mentioned you can see it on the material documentation. What I have found is that only happens on matInput when using [(ngModel)]. If you use a formControl it doesn't happen.

It is okay, when it is displayed as placeholder with fromControl. But it is still blurred, but a bit less when used as label. The label is positioned slightly lower with ngModel.

[davidalmquistcab]

I found out that in my case the css property "will-change: transform" was causing the blurry form field .mdc-floating-label { will-change: transform; } Angular material 16.2.1

[Bschitter]

I found out that in my case the css property "will-change: transform" was causing the blurry form field .mdc-floating-label { will-change: transform; } Angular material 16.2.1

Thanks for finding the issue, I wasn't able to pinpoint it. This is also what causes it in my case.

[shanieMoonlight]

This i still happening in 16.2.4. You can see it on the outline form input on the examples page of the Material website [https://material.angular.io/components/form-field/examples](form field examples)

unchecking { will-change: transform; } in the styles (developer tools) fixes the issue but overriding it in styles.scss doesn't work.

Has anyone found workaround?

[Bschitter]

This i still happening in 16.2.4. You can see it on the outline form input on the examples page of the Material website [https://material.angular.io/components/form-field/examples](form field examples)

unchecking { will-change: transform; } in the styles (developer tools) fixes the issue but overriding it in styles.scss doesn't work.

Has anyone found workaround?

@shanieMoonlight I have added the following css in my styles.css. That mostly fixes the blur, but in some cases it is still a little blurred, but generally better:

.mdc-floating-label {
  will-change: unset !important;
}

In my case the !important is necessary.

[shanieMoonlight]

@Bschitter That works. Thanks!! It seems crazy that this is happening in Chrome when Google supports both Chrome and Angular

[yenmangu]

.mat-mdc-form-field-infix {
  backface-visibility: hidden;
}

Adding this to my styles.scss fixed the issue for me. Ridiculous that this is even an issue.

[Grochni]

I also experienced the issue with blurry labels, but the very same setting of will-change: transform was causing the material labels in form fields to fully disappear when being hovered. However, this issue only occured on some customers' machines (and on those even in different browsers like Chrome, Firefox, Edge) and I was not able to reproduce it in any environment other than that. Setting will-change to unset fixed the issue for me.

I'm leaving this comment here as it seems related and as a reference for people with similar issues, but unfortunately I cannot offer any reproduction or even any insight on why this happened on their specific environment.

[Descentrata]

The person above me is right, it's caused by the will-change property. I managed to fix our form fields in Chrome with the following css (Angular 16):

.mat-mdc-floating-label.mdc-floating-label,
.mat-mdc-floating-label.mdc-floating-label mat-label,
mat-form-field .mdc-text-field {
    will-change: unset;
}