2

I have a white square background on a radio button. This issue can be reproduced only of Windows plus Chrome. I tried many options trying to remove this issue but the issue still persists. Here is the DEMO for the issue. Is there anywork around to solve this issue.

nebula
  • 3,932
  • 13
  • 53
  • 82
  • Check this post.This may be helpful http://stackoverflow.com/questions/12151523/radio-buttons-show-unwanted-white-background-in-chrome-firefox-is-fine – Jerin K Alexander May 27 '13 at 06:15

1 Answers1

1

This was a known bug in chrome. I would recommend you update to the latest version of chrome. They seemed to have the bug resolved.

However in the fiddle you shared, I can see the white background around the radio button. I think it's probably because of the

-webkit-backface-visibility

applied to the container div.

I just added:

-webkit-backface-visibility: hidden;

and I don't see the white square now. Working demo.

@Jerin suggested you might also use a sprite image as a placeholder for the span on the radio button which would cover the white background on the radio button.

This post also might come in handy but I think they have resolved the issue in the latest versions of google chrome.

Hope it helps.

Community
  • 1
  • 1
Vivek Pradhan
  • 4,777
  • 3
  • 26
  • 46
  • FYI. Your demo doesnt work in chrome. Which version are you using. - @Vivek Pradhan – Nitesh May 27 '13 at 07:13
  • I am using the Version 27.0.1453.94 m for chrome right now and the demo seems to be working fine on my browser. – Vivek Pradhan May 27 '13 at 08:40
  • It seems Chrome reverted to buggy version and has same problem with background in Version 31.0.1650.2 dev-m. – Jeffz Sep 26 '13 at 12:51