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

Question

There's a bug in Windows Chrome that makes a radio button's background turn white when its parent is both out of the document flow and has -webkit-backface-visibility applied.

Here it is in action: http://jsfiddle.net/misterkeg/uMajC/

I'm using -webkit-backface-visiblity: hidden to get around the WebKit transition flicker bug.

This problem also occurs if I use the -webkit-transform: translateZ(0) fix instead, so it seems to kick in whenever hardware acceleration is active.

Overriding the input's -webkit-backface-visibility to visible doesn't help either.

Are there any known workarounds to this? I've filed a Chromium bug but would like to know if there are any ways around it in the meantime.

Answer 1

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.

Answer 2

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;
}

Answer 3

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.