使用 -webkit-backface-visibility 时，Windows Chrome 中的单选按钮背景变为白色

问题描述

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

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.

这是在行动:http://jsfiddle.net/misterkeg/uMajC/

我正在使用 -webkit-backface-visiblity: hidden 来解决 WebKit 过渡闪烁错误.

I'm using -webkit-backface-visiblity: hidden to get around the WebKit transition flicker bug.

如果我改用 -webkit-transform: translateZ(0) 修复程序也会出现此问题，因此它似乎在硬件加速处于活动状态时启动.

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.

将输入的 -webkit-backface-visibility 覆盖为 visible 也无济于事.

Overriding the input's -webkit-backface-visibility to visible doesn't help either.

是否有任何已知的解决方法?我已提交 Chromium 错误，但想知道是否有任何解决方法在此期间.

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.

推荐答案

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

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.

我发现的唯一解决方法是在 CSS ninja 的此页面中:http://www.thecssninja.com/css/custom-inputs-using-css.

The only workaround I've found is in this page from CSS ninja: http://www.thecssninja.com/css/custom-inputs-using-css.

总而言之，这就是解决方案(我提到的页面有一个现场演示链接，http://www.thecssninja.com/demo/css_custom-forms/):

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 cant post you the url, but with the code and the links above I think it's easy to see.

如果您只想针对 Chrome，可以尝试这篇文章中提供的解决方案:你能定位谷歌浏览器吗?

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.

这篇关于使用 -webkit-backface-visibility 时，Windows Chrome 中的单选按钮背景变为白色.任何解决方法?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！