当使用-webkit背面可见性时，Windows Chrome中的单选按钮背景将变为白色.任何变通办法

Question

Windows Chrome中存在一个错误，当单选按钮的父按钮不在文档流中并且应用了-webkit-backface-visibility时，该错误会使其背景变白。

它在这里发挥作用：http://jsfiddle.net/misterkeg/uMajC/

我正在使用-webkit-backface-visiblity: hidden来绕过WebKit转换闪烁错误。

如果我使用-webkit-transform: translateZ(0)修复程序，也会出现这个问题，所以每当硬件加速处于活动状态时，它似乎就会出现。

将输入的-webkit-backface-visibility重写为visible也没有帮助。

有什么已知的解决方法吗？我已经提交了一个Chromium错误，但我想知道在此期间是否有任何方法可以解决它。

Answer 1

我发现了相同的问题，但在不同的上下文中，所以这可能不是-webkit背面可视性的问题，而是多种组合的问题。在我的情况下，当带有单选按钮的页面包含类似谷歌地图的地图（一个专有的地图，我还没有在地图中找到导致问题的确切原因）并显示在iframe中时，问题就会出现。如果我用检查器隐藏地图，单选按钮看起来不错，或者如果我直接查看页面，而不是在iframe内。

我找到的唯一解决方法是在这个CSS忍者页面中：http://www.thecssninja.com/css/custom-inputs-using-css.

总之，这就是解决方案（有一个从我提到的页面链接的实时演示，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");
}

由于跨度在标签内，单击它将具有与单击单选按钮本身相同的效果，因此单选按钮仍然可以正常工作。

我在一个开发环境中工作，所以我不能给你发布网址，但有了上面的代码和链接，我觉得很容易看到。

如果你只想针对Chrome，你可以尝试本文提供的解决方案：你能瞄准谷歌浏览器吗？

我希望它能有所帮助，我不喜欢用这么复杂的方式来呈现一个简单的单选按钮，就我而言，我在我的网站上唯一一个有这个问题的页面上使用过它，而且效果很好。

Answer 2

更好的解决方案，无需使用图像：

将radio元素封装在div中，并将该div的溢出设置为hidden，将border-radius设置为100px。然后将无线电输入设置为显示块，并且没有余量。这对我有效：

标记：

<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

这里有一个不使用图像（也不使用单选css编辑）的替代解决方案。解决方案会在单选按钮周围产生一个白色的圆形圆圈（如果你的设计可以容忍的话）试试这个：

html:

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

css：

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

就是这样。