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.

Dorran

I've seen similar problems on some but not all buttons and radio buttons in some dialogs of a site I'm working on. No -webkit-backface-visibility involved. I have several very similar dialogs in my site; oddly, some of them have this problem and some don't. I'm afraid what I'm working on is too complex to post here, and still under development so I can't just provide a link. But it is worth knowing it probably has nothing to do with -webkit-backface-visibility, and can affect buttons as well as radio buttons. What they have in common is curved edges. – Jannery

(by "very similar dialogs", I mean similar to one another, not to the original poster's) – Jannery

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.

Furtherance

I had the same problem with a form opened over a google map, but I solved hiding the map :P – Sandstrom

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

Tindal

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.

Repand