Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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:

enter image description here

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): enter image description here

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

Googly Eyes in Edge

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.

like image 847
DigitalDan Avatar asked Sep 09 '25 10:09

DigitalDan


2 Answers

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.

like image 200
adrianba Avatar answered Sep 11 '25 04:09

adrianba


@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:

Chrome

IE:

enter image description here enter image description here

like image 43
click2install Avatar answered Sep 11 '25 04:09

click2install