Blurry TextField label when variant="filled"

[chybisov]

Hi! I have issue with TextField label if variant="filled" is set then label will become blurry on focus or unfocus.

• [x] The issue is present in the latest release.
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

https://codesandbox.io/s/material-demo-2ymqu

Click to edit field and you will see blurry label for about 1 second like this Then it will return to correct crisp view

If variant="filled" not set label always crisp.

Expected Behavior 🤔

Label should be always stay crisp (not blurry).

Context 🔦

It seems that this is old CSS Translate issue in Chrome browsers with hardware acceleration turns on. I don't have such issue in Firefox for example. Also interesting fact that Google doesn't have this issue in their signup page.

Please help! Thank you!

Your Environment 🌎

Tech	Version
Material-UI	v4.4.2
React	v16.9.0
Browser	Version 77.0.3865.75 (Official Build) (64-bit) (same in v76)

[oliviertassinari]

@chibis0v As far as I know, there is nothing we can do about it. Do you see any leverage?

[chybisov]

@chibis0v As far as I know, there is nothing we can do about it. Do you see any leverage?

Why? Without variant="filled" everything works great! I think issue in

variant="filled"
transform: translate(12px, 7px) scale(0.75); 

vs

without variant="filled"
transform: translate(0, 1.5px) scale(0.75); 

So we could adjust variant="filled" and use maybe margin for position it correctly. And again this works on Google signup page correctly somehow.

[oliviertassinari]

Any fix proposal is welcome.

[chybisov]

@oliviertassinari ok, I will try to provide some solution.

[chybisov]

@oliviertassinari it seems that variant="outlined" also has this issue, but it less visisible. variant="outlined" is identical to this google signup page https://accounts.google.com/signup. Maybe you can proceed with their implementation?

They don't have things like 1.5px in translate by the way.

[chybisov]

@oliviertassinari please check updated sandbox https://codesandbox.io/s/material-demo-2ymqu

If you click on button it seems animation of that click produces blurring to label. How this possible? And focus blurring not reproducing anymore. Only button click now produce blur. I'm going crazy :) These components not even related to each other. I don't think this is Chrome issue.

If you apply disableRipple to button everything ok. No blur for focus on textfield and button click. But I need ripple effect :(

[oliviertassinari]

@chibis0v I have proposed aggressive changes 3 weeks ago in #17221. We have removed the z-index: 0 from the touch ripple. Adding it back seems to solve the blur issue. I would propose that we add it back. Would it solve your problem?

[chybisov]

@oliviertassinari it works! Thank you! I added z-index: 0 to .MuiTouchRipple-root and blur has gone! It will be great to see this fix in next release! Why did you do this change then?

[oliviertassinari]

@chibis0v Do you want to submit a pull request?

The property was removed as an attempt to simplify the existing styles. It was a 3 years old piece of code we added to solve another problem that doesn't seem to manifest anymore with the recent versions of Chrome.

[chybisov]

@oliviertassinari I'll try to submit pull request. Thank you!

[mshahzebraza]

I was facing the same issue. searched "blur" in the html dom and found it in "grammerly" extension code. I fixed it by disabling "grammerly" extension.