Material-ui: Radio Button Dot Misaligned when Checked in IE11

[rupert-ong]

• [x ] This is not a v0.x issue.
• [x ] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior 🤔

When you click on a radio button in any scenario (in a RadioGroup or standalone), the dot appears in the stroked circle (as per v3.9.3).

Current Behavior 😯

When you click on a radio button in any scenario (in a RadioGroup or standalone), the dot is misaligned and appears outside the stroked circle (as per v4.0.1).

Steps to Reproduce 🕹

Visit the Radio Buttons page on the Component Demos and click on a radio button in any of the examples.

Context 🔦

Affects all of our customers using IE11 when filling out our forms.

Your Environment 🌎

| Tech | Version |
|--------------|---------|
| Material-UI | v4.0.1 |
| React | 16.8.6 |
| Browser | IE11 |

[oliviertassinari]

@rupert-ong Thanks for reporting the problem. What do you think of this diff?

diff --git a/packages/material-ui/src/Radio/RadioButtonIcon.js b/packages/material-ui/src/Radio/RadioButtonIcon.js
index aeb0b8399..46646c861 100644
--- a/packages/material-ui/src/Radio/RadioButtonIcon.js
+++ b/packages/material-ui/src/Radio/RadioButtonIcon.js
@@ -18,6 +18,7 @@ export const styles = theme => ({
     },
   },
   layer: {
+    left: 0,
     position: 'absolute',
     transform: 'scale(0)',
     transition: theme.transitions.create('transform', {

Do you want to submit a pull request? :)

[ryancogswell]

@rupert-ong Thanks for already fixing this. I just noticed this same issue this morning.

I know this will be in a release very soon, but for anyone that runs into this before then needing a workaround, the following overrides in the theme replicate the fix:

   overrides: {
      PrivateRadioButtonIcon: {
         layer: {
            left: 0
         }
      }
   }

[StephenMcConnel]

The suggested override doesn't even compile, and nothing similar to it works.

[mbrookes]

@StephenMcConnel The issue was fixed in May 2019. If you're still experiencing this issue with the current release of Material-UI, please open a new issue.