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.