[Radio] Radio Buttons have a little white dot in the middle on certain screen sizes

vitphire commented 3 years ago

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).

joyzhong commented 3 years ago

Looks like this happens at certain zoom levels (175% for me). Moving to backlog.

AdityaPawar2 commented 1 week ago

This is still replicating in Angular 18 as well. Any solution using design tokens ?

AdityaPawar2 commented 1 week ago

Close up for reference

AdityaPawar2 commented 1 week ago

https://github.com/angular/components/issues/22036 The same issue was for unselected radio but was fixed.

material-components / material-components-web