Visual bug: in Firefox, the dot in a selected radio button is off-center

[roryokane]

• I have searched the issues of this repository and believe that this is not a duplicate.

Version

3.4.1

Environment

• Ubuntu 17.10, Firefox 56
• Ubuntu 18.04, Firefox 61

Reproduction link

https://ant.design/components/radio/

Steps to reproduce

Load the radio button demo page. Look at all the examples of radio buttons, in particular the selected radio buttons.

What is expected?

The blue dot in the center of each selected radio button should be centered within the blue outer circle.

This screenshot from Chrome has centered dots in the selected radio buttons:

What is actually happening?

The blue dot is off-center. It is shifted down and to the right by about 1 pixel. This makes the radio button look more like a cartoon eye.

---

This visual bug can be seen in Firefox 56 but not in Chrome 65.

I have also seen this bug in a project that uses Ant Design, so it is not just a programming error in the Ant Design showcase website.

When I look at checkboxes, I think they have the same problem too – the expanding focus ring on click and the checkbox both seem off-center. It is less noticeable than for radio buttons because those shapes aren’t circles.

[dengfuping]

@roryokane There is no such problem in the latest FireFox 59. Maybe it's a bug in the FireFox 56.

[jcrobak]

I am seeing this, too, on firefox 61 on mac.

[roryokane]

After upgrading to the latest Firefox 61 and Ubuntu 18.04, I am still seeing this.

[rasitozcan]

Changing browser zoom level creates the issue.

[jansule]

Also experiencing this bug in FireFox 62 and IE11. In contrast to what @rasitozcan mentioned, I also experience this bug on 100% zoom (screen resolution 1920x1080) . But the resolution seems to have an impact here. Changing the zoom level also changes the position of the inner dot (see screenshots below).

Edit: Tested with antd version 3.9.3

[avilaj]

i'm also experiencing this same issue. any finding on a workaround at least?

[afc163]

Close for can't reproduce it.