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

chromiumcssgoogle-chromeradio-buttonwindows

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.

Best Answer

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.

Related Solutions

Css – Webkit: CSS force hardware acceleration for 2D transforms without using 3D CSS properties

You can add a 3d transform value to null in addition to your 2d transform value :

el {
    transform: 2DValue(val) 3DValueSetToNull(0);
    transform: 2DValue(val);
}

Which in real CSS can make something like :

div {
    /* translateZ(0) will not interfere with the rotate value */
    /* Also with -webkit-, -moz-, -o- */
    transform: rotate(90deg) translateZ(0);
    /* Compatibility for older (yep) browsers */
    /* Also with -webkit-, -moz-, -ms-, -o- */
    transform: rotate(90deg);
}

Be sure to use a 3D transform value that will not interfere with your 2D transform value.

PS : The 3d transform values are :

translate3d(x, y, z)
translateZ(z)
scale3d(sx, sy, sz)
scaleZ(sz)
rotateX(angle)
rotateY(angle)
rotate3d(x, y, z, angle),
perspective(p)
matrix3d(…)

Css – Radio buttons show unwanted white background in Chrome. Firefox is fine

this is a known Bug in Chrome which does not have real workarounds.

The only option I see and use at this point of time is to use a sprite sheet with images of the check boxes. I made a fiddle to show it to you with some random sprite I found on the internet:

Workaround

HTML:

<div id="show">
    <input type="radio" id="r1" name="rr" />
    <label for="r1"><span></span>Radio Button 1</label>
<p />
    <input type="radio" id="r2" name="rr" />
    <label for="r2"><span></span>Radio Button 2</label>
</div>

CSS:

div#show {
    width:100%;
    height: 100%;
    background:black;
    margin: 10px;
    padding: 10px;
}

input[type="radio"] {
    /* Uncomment this to only see the working radio button */
    /* display:none; */
}

input[type="radio"] + label {
    color:#f2f2f2;
    font-family:Arial, sans-serif;
    font-size:14px;
}

input[type="radio"] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    margin:-1px 4px 0 0;
    vertical-align:middle;
    background:url(http://d3pr5r64n04s3o.cloudfront.net/tuts/391_checkboxes/check_radio_sheet.png) -38px top no-repeat;
    cursor:pointer;
}

input[type="radio"]:checked + label span {
    background:url(http://d3pr5r64n04s3o.cloudfront.net/tuts/391_checkboxes/check_radio_sheet.png) -57px top no-repeat;
}

Radiobuttons with sprite

You could create your own sprite with radio buttons in your desired design...

Hope that helps, if you have any more questions, let me know.

-Hannes

Best Answer

Related Solutions

Css – Webkit: CSS force hardware acceleration for 2D transforms without using 3D CSS properties

Css – Radio buttons show unwanted white background in Chrome. Firefox is fine

Related Topic