我发现了同样的问题但是在不同的环境中,所以可能是-webkit-backface-visiblity不是问题,而是有几种组合.在我的情况下,当带有单选按钮的页面包含像地图这样的谷歌地图(一个专有的地图,我还没有找到地图中究竟是什么导致问题)并且显示在iframe内时,就会出现问题.
如果我使用检查器隐藏地图,单选按钮看起来不错,或者我直接查看页面,而不是iframe内部.

我发现的唯一解决方法是在这个页面来自CSS ninja：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,可以尝试使用此帖子中提供的解决方案：
Can you target Google Chrome?

我希望它有所帮助,我不喜欢这么复杂的方式来渲染一个简单的单选按钮,在我的情况下,我已经在我的网站中唯一有问题的页面中使用它并且它运行良好.