Radio button background goes white in Windows Chrome when using -webkit-backface-visibility. Any workarounds?

I have found the same problem but in different context, so might be it's not a problem with -webkit-backface-visiblity but with several combinations of things. In my case the problem arises when the page with the radio buttons contains a google maps like map (a propietary one, I haven't found what exactly in the map causes the problem) and is displayed inside an iframe.If I hide the map with the inspector the radio buttons look ok, or if I view the page directly, not inside the iframe.

The only workaround I've found is in this page from CSS ninja: http://www.thecssninja.com/css/custom-inputs-using-css.

In summary, this is the solution (there is a live demo linked from the page I've mentioned, http://www.thecssninja.com/demo/css_custom-forms/):

HTML

<label for="input1" class="radio_image"> <input type="radio" name="input" id="input1" /> <span>Option 1</span></label>

CSS

/*we hide the real radio button*/.radio_image input[type=radio] {  position:absolute;opacity:0;}/*we assign the span a background image  which is a capture of the actual radio button*/.radio_image input[type=radio] + span {  background-image: url("radio-button.gif");  background-position: left top;  background-repeat: no-repeat;  padding-left: 1.6em;}/*if radio is checked we change the background  image to one with a checked radio button (it can be  done with a sprite type background too): */.radio_image input[type=radio]:checked + span {  background-image: url("radio-button-checked.gif");}

As the span is inside the label, clicking on it will have the same effect as clicking on the radio button itself, so the radio button still works ok.

I am working in a developement enviroment so I can´t post you the url, but with the code and the links above I think it's easy to see.

If you want to target just Chrome, you can try the solution provided in this post:Can you target Google Chrome?

I hope it helps, I don't like such a complicated way to render just a simple radio button, in my case I've used it in the only page having that problem in my site and it has worked fine.

Better solution w/out having to use images:

Wrap the radio element in a div, and set that div's overflow to hidden, and border-radius to 100px. Then set the radio input to display block, and no margin. This worked for me:

Markup:

<div class="radio_contain">    <input type="radio" id="r1" name="r1"></div>

CSS:

.radio_contain {  display: inline-block;  border-radius: 100px;  overflow: hidden;  padding: 0;}.radio_contain input[type="radio"] {  display: block;  margin: 0;}

Here is an alternate solution that doesn't use images ( nor radio css edits ).The solution results in a round white circle around the radio button ( if your design can tolerate that ) try this:

html:

<span class='radioWrap'><input type='radio'...></span>

css:

.radioWrap{  background-color: white;  padding: 4px 3px 1px 4px;  border-radius: 10px;}

That is it.