material-components-web
material-components-web copied to clipboard
Published
20 hours ago •
material-components
material-components
[Radio] Radio Buttons have a little white dot in the middle on certain screen sizes
Bug report
A 1px wide white dot appears in the middle of radio buttons on certain screen sizes (/zoom levels).
Steps to reproduce
Here is the code:
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">
<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
</head>
<body>
<div class="mdc-form-field">
<div class="mdc-radio">
<input class="mdc-radio__native-control" type="radio" id="radio-1" name="radios" checked>
<div class="mdc-radio__background">
<div class="mdc-radio__outer-circle"></div>
<div class="mdc-radio__inner-circle"></div>
</div>
<div class="mdc-radio__ripple"></div>
</div>
<label for="radio-1">Radio 1</label>
</div>
</body>
<script>
const radio = new mdc.radio.MDCRadio(document.querySelector('.mdc-radio'));
const formField = new mdc.formField.MDCFormField(document.querySelector('.mdc-form-field'));
formField.input = radio;
</script>
</html>
Actual behavior
The radio button has a white dot in the middle
Expected behavior
The radio button should not have a white dot in the middle
Your Environment:
| Software | Version(s) |
|---|---|
| MDC Web | 8.0.0 |
| Browser | Chrome |
| Operating System | Windows 10 |
Possible solution
<style>
.mdc-radio__background .mdc-radio__inner-circle {background-color: var(--mdc-theme-secondary, #018786);}
</style>
This works, but it probably doesn't consider styling (which I have yet to learn how to do).
Looks like this happens at certain zoom levels (175% for me). Moving to backlog.
This is still replicating in Angular 18 as well. Any solution using design tokens ?
https://github.com/angular/components/issues/22036 The same issue was for unselected radio but was fixed.