[TextField] Fix blurry text on label

[chybisov]

This PR fixes blurry text on label.
When we use variant="filled" and have progress on page then text will be blurred during progress animation.

Example https://codesandbox.io/s/material-demo-0cv2h

without animation

with animation

Also there was similar issue #17443 and PR for that #17453 we previously fixed.

• I have followed (at least) the PR section of the contributing guide.

[mui-pr-bot]

Details of bundle changes.

Comparing: 62e439b...56b4f2b

bundle	Size Change	Size	Gzip Change	Gzip
FormControl	▲ +9 B (+0.01% )	64.6 kB	▲ +4 B (+0.02% )	20.2 kB
TextField	▲ +9 B (+0.01% )	125 kB	▲ +3 B (+0.01% )	36.6 kB
@material-ui/core	▲ +9 B (0.00% )	362 kB	▲ +2 B (0.00% )	98.9 kB
@material-ui/core[umd]	▲ +9 B (0.00% )	317 kB	▲ +2 B (0.00% )	92 kB
@material-ui/lab	--	185 kB	--	55.2 kB
@material-ui/styles	--	51.4 kB	--	15.4 kB
@material-ui/system	--	16.4 kB	--	4.3 kB
Alert	--	83.6 kB	--	26.3 kB
AlertTitle	--	64.3 kB	--	20.3 kB
AppBar	--	64.2 kB	--	20.1 kB
Autocomplete	--	132 kB	--	41.4 kB
Avatar	--	65.4 kB	--	20.6 kB
AvatarGroup	--	62.4 kB	--	19.6 kB
Backdrop	--	68 kB	--	21 kB
Badge	--	65.5 kB	--	20.4 kB
BottomNavigation	--	62.6 kB	--	19.6 kB
BottomNavigationAction	--	75.7 kB	--	23.9 kB
Box	--	72 kB	--	21.8 kB
Breadcrumbs	--	67.9 kB	--	21.3 kB
Button	--	79.9 kB	--	24.5 kB
ButtonBase	--	74.2 kB	--	23.3 kB
ButtonGroup	--	83.4 kB	--	25.5 kB
Card	--	63 kB	--	19.7 kB
CardActionArea	--	75.3 kB	--	23.7 kB
CardActions	--	62.2 kB	--	19.5 kB
CardContent	--	62.1 kB	--	19.5 kB
CardHeader	--	65.2 kB	--	20.5 kB
CardMedia	--	62.5 kB	--	19.7 kB
Checkbox	--	83.2 kB	--	26.3 kB
Chip	--	82.8 kB	--	25.4 kB
CircularProgress	--	64.3 kB	--	20.3 kB
ClickAwayListener	--	3.91 kB	--	1.55 kB
Collapse	--	68.2 kB	--	21.1 kB
colorManipulator	--	3.88 kB	--	1.52 kB
Container	--	63.3 kB	--	19.8 kB
CssBaseline	--	57.7 kB	--	18.1 kB
Dialog	--	83.2 kB	--	25.9 kB
DialogActions	--	62.2 kB	--	19.5 kB
DialogContent	--	62.4 kB	--	19.6 kB
DialogContentText	--	64.2 kB	--	20.2 kB
DialogTitle	--	64.4 kB	--	20.2 kB
Divider	--	62.7 kB	--	19.7 kB
docs.landing	--	56.4 kB	--	14.5 kB
docs.main	--	596 kB	--	194 kB
Drawer	--	85 kB	--	25.8 kB
ExpansionPanel	--	72.5 kB	--	22.7 kB
ExpansionPanelActions	--	62.2 kB	--	19.5 kB
ExpansionPanelDetails	--	62.1 kB	--	19.5 kB
ExpansionPanelSummary	--	78.3 kB	--	24.7 kB
Fab	--	77 kB	--	24 kB
Fade	--	23.4 kB	--	7.97 kB
FilledInput	--	73.7 kB	--	22.9 kB
FormControlLabel	--	65.7 kB	--	20.6 kB
FormGroup	--	62.2 kB	--	19.5 kB
FormHelperText	--	63.5 kB	--	20 kB
FormLabel	--	63.6 kB	--	19.8 kB
Grid	--	65.3 kB	--	20.5 kB
GridList	--	62.6 kB	--	19.7 kB
GridListTile	--	63.9 kB	--	20 kB
GridListTileBar	--	63.4 kB	--	19.9 kB
Grow	--	24 kB	--	8.19 kB
Hidden	--	66.1 kB	--	20.8 kB
Icon	--	62.9 kB	--	19.8 kB
IconButton	--	76.3 kB	--	23.8 kB
Input	--	72.7 kB	--	22.7 kB
InputAdornment	--	65.3 kB	--	20.5 kB
InputBase	--	70.8 kB	--	22.2 kB
InputLabel	--	65.5 kB	--	20.2 kB
LinearProgress	--	65.5 kB	--	20.5 kB
Link	--	66.8 kB	--	21.1 kB
List	--	62.5 kB	--	19.5 kB
ListItem	--	77.3 kB	--	24.2 kB
ListItemAvatar	--	62.3 kB	--	19.5 kB
ListItemIcon	--	62.3 kB	--	19.5 kB
ListItemSecondaryAction	--	62.2 kB	--	19.5 kB
ListItemText	--	65.1 kB	--	20.5 kB
ListSubheader	--	62.9 kB	--	19.8 kB
Menu	--	89 kB	--	27.4 kB
MenuItem	--	78.4 kB	--	24.5 kB
MenuList	--	66.2 kB	--	20.7 kB
MobileStepper	--	68 kB	--	21.4 kB
Modal	--	14.5 kB	--	5.05 kB
NativeSelect	--	77 kB	--	24.3 kB
NoSsr	--	2.19 kB	--	1.04 kB
OutlinedInput	--	74.7 kB	--	23.3 kB
Paper	--	62.5 kB	--	19.5 kB
Popover	--	83.3 kB	--	25.8 kB
Popper	--	28.8 kB	--	10.3 kB
Portal	--	2.92 kB	--	1.3 kB
Radio	--	84.2 kB	--	26.6 kB
RadioGroup	--	64.6 kB	--	20.1 kB
Rating	--	70.7 kB	--	22.7 kB
RootRef	--	4.24 kB	--	1.64 kB
Select	--	117 kB	--	34.6 kB
Skeleton	--	63.1 kB	--	20 kB
Slide	--	25.5 kB	--	8.71 kB
Slider	--	76.8 kB	--	24.3 kB
Snackbar	--	75.6 kB	--	23.7 kB
SnackbarContent	--	63.7 kB	--	20.1 kB
SpeedDial	--	86.4 kB	--	27.2 kB
SpeedDialAction	--	119 kB	--	37.5 kB
SpeedDialIcon	--	64.7 kB	--	20.3 kB
Step	--	62.8 kB	--	19.7 kB
StepButton	--	82.5 kB	--	26.1 kB
StepConnector	--	62.9 kB	--	19.8 kB
StepContent	--	69.3 kB	--	21.7 kB
StepIcon	--	64.8 kB	--	20.2 kB
StepLabel	--	68.8 kB	--	21.7 kB
Stepper	--	65 kB	--	20.5 kB
styles/createMuiTheme	--	16.5 kB	--	5.81 kB
SvgIcon	--	63.2 kB	--	19.8 kB
SwipeableDrawer	--	92.4 kB	--	28.9 kB
Switch	--	82.3 kB	--	26 kB
Tab	--	76.5 kB	--	24.2 kB
Table	--	62.7 kB	--	19.7 kB
TableBody	--	62.3 kB	--	19.5 kB
TableCell	--	64.2 kB	--	20.2 kB
TableContainer	--	62.1 kB	--	19.5 kB
TableFooter	--	62.3 kB	--	19.5 kB
TableHead	--	62.3 kB	--	19.5 kB
TablePagination	--	144 kB	--	42 kB
TableRow	--	62.6 kB	--	19.7 kB
TableSortLabel	--	77.6 kB	--	24.4 kB
Tabs	--	85.8 kB	--	27.2 kB
TextareaAutosize	--	5.12 kB	--	2.14 kB
ToggleButton	--	76.3 kB	--	24.2 kB
ToggleButtonGroup	--	63.4 kB	--	20 kB
Toolbar	--	62.5 kB	--	19.6 kB
Tooltip	--	102 kB	--	32.4 kB
TreeItem	--	74.2 kB	--	23.5 kB
TreeView	--	66.8 kB	--	21.1 kB
Typography	--	63.8 kB	--	20 kB
useAutocomplete	--	14.6 kB	--	5.3 kB
useMediaQuery	--	2.58 kB	--	1.07 kB
Zoom	--	23.5 kB	--	8.1 kB

Generated by 🚫 dangerJS against 56b4f2b

[eps1lon]

Would

* { z-index: 0 }

globally also work?

It looks like we might have (or will have) this issue in other places as well. Seems like it would be better to fix it automatically.

[chybisov]

@eps1lon I think * { z-index: 0 } can break more then it will probably fix. This blurry issue related only for classes that has translate or somehow interact with translate.

[oliviertassinari]

Can the z-index be scoped to the label? Would it still work? Why is the filled variant the only impacted?

[chybisov]

@oliviertassinari InputLabel already has z-index: 1 and FormControl don't have one. I think this might causes rendering issue.

[chybisov]

@oliviertassinari filled variant impacted because FilledInput has background-color property and that's why InputLabel must have z-index: 1 and we have such issue because parent element should also have z-index or it will have rendering issue. Other variants not impacted because children don't have z-index at all.

[eps1lon]

@chybisov Thanks for the fix and additional context 👍

[andrelmlins]

This change generated a bug when using React Select together with FormControl

[chybisov]

@andrelmlins could you please create an issue with explanation?

[mbyrne00]

@andrelmlins - I just saw your comment ... the issue #19677 I linked to this PR describes the issue you mention and has plenty of detail. This will break any field component that renders things like dropdown menus as children. For example for any absolute positioned elements with z-index > 0, the z-index will not have the desired effect .

In the issue I raised checkboxes were appearing on top of the dropdown as you can see in the screen grab.

[bodjay]

So now everyone who uses absolute positions have to fix them in all projects?

[oliviertassinari]

Could we continue the follow-up discussion in #19677? It seems that we have to make a tradeoff. The more information we have, on each side, the best compromise we can find.