Is this an IE11 Radio Button rendering bug (they look like googly eyes)?

Question

I'm working on a website that has a handful of radio buttons. In most browsers everything looks fine, but in IE11 some of the radio buttons look like googly eyes. Now, is this a bug in IE11 or am I doing something wrong?

Edit: screen shot of the real website:

Here's an example (try it in IE11 to see the effect): http://jsfiddle.net/TjZA5/

Here's a zoomed screen shot from my browser (IE11 on Windows 7):

You can clearly see the different spacing between the centre discs and the outer circles. The HTML is identical and valid (lots of <input type="radio" checked="checked"> elements) and so is the CSS (just a little margin to make the effect more obvious). I'm wondering if it's a rounding error in the IE rendering code?

Update: I submitted this issue as a feedback item to Microsoft Connect (http://connect.microsoft.com/IE/feedback/details/814911/radio-buttons-look-like-googly-eyes-in-ie11) and got a response saying that it's an optical illusion. I don't think it is, so I provided some more examples. I'm more convinced now that it's a bug in IE, but I'll have to wait and see.

Update re Edge browser in Windows 10:

I noticed that this issue persists in Microsoft's latest browser, Edge (which comes with Windows 10):

The Microsoft Connect issues hasn't been updated, so I guess we're stuck with googly eyed radio buttons for now.

Update: Microsoft Connect Issue closed as "Won't Fix"

I've created a new issue on developer.microsoft.com: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7114234/ in the hope that they'll fix it one day.

Update: Microsoft have updated the issue saying it's fixed!

https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/8516392/

I haven't had a chance to test this on a new build of Windows 10 yet, but will do asap.

Trifocals

The man is trying to make a point Alien – Imprecision

There needs to be sufficient radio buttons to start seeing the effect. Other HTML elements taking up space will also work. On the real website I'm developing there are many other form controls, buttons, paragraphs, etc... – Trifocals

Only IE would figure out a way to mess up radio buttons. – Zeta

I haven't had any further response from Microsoft, so I've updated the ticked on Connect asking for a comment from them. Any Microsoft devs on Stack Overflow care to comment? – Trifocals

... if anyone else can reproduce this bug then please can you follow the above link to Microsoft Connect and click "I can too" to increment the count of users that can reproduce it. Thanks. – Trifocals

I think I just encountered the same bug, although I'm drawing a custom radio button. In this fiddle, pay attention to the third radio button (selected) while you slowly drag the splitter back and forth. What makes this even more strange is that it seems to only affect the third radio button in my example. – Velasco

Answer 1

The response you got on Microsoft Connect was not from Microsoft. This is a known issue that we are tracking. I think it is related to our sub-pixel positioning logic but it is definitely something we're tracking. You should see this updating in Connect soon.

Hardboard

Thanks. Official response from Microsoft on Connect said "Unfortunately, we are not able to address this feedback in our upcoming release. We will consider your feedback for a future release." – Trifocals

Answer 2

@TheGermanOne - I agree this is a bug. I get the same as show below for IE 11 and Chrome. IE zoomed doesn't look too bad but 100% is crappy :(

Taken from your jsfiddle.

Chrome:

IE:

Dimple

Thanks for the screenshots, glad to see others can reproduce the issue, meaning I'm probably not doing anything wrong. Looking more and more likely to be an IE bug. – Trifocals

@TheGermanOne, there seems to be quite a lot of search results on IE11 breaking form element rendering - and not just for radio's. – Dimple

yeah it's not the only issue I've found, just the only issue I couldn't find documented anywhere else. – Trifocals