Css 使用-webkit backface visibility时，Windows Chrome中的单选按钮背景变为白色。有解决办法吗？

Windows Chrome中存在一个缺陷，当单选按钮的父按钮不在文档流中并且应用了

-webkit背面可见性时，该缺陷会使单选按钮的背景变为白色

这就是它的作用：

我正在使用
-webkit backface visiblity:hidden
来绕过webkit transition闪烁bug

如果我改用
-webkit transform:translateZ（0）
修复程序，也会出现这个问题，因此每当硬件加速激活时，它似乎就会启动

将输入的
-webkit背面可见性
重写为
可见
也没有帮助

有没有已知的解决方法？我已经提交了一份申请，但想知道在此期间是否有任何解决方法。
我发现了相同的问题，但在不同的背景下，因此可能不是-webkit backface visibility的问题，而是多种事物的组合。在我的例子中，当带有单选按钮的页面包含一个类似google maps的地图（一个合适的地图，我没有发现地图中到底是什么导致了问题）并显示在iframe中时，问题就出现了。
如果我用inspector隐藏地图，单选按钮看起来正常，或者如果我直接查看页面，而不是在iframe中

我找到的唯一解决方法是在CSS ninja的这个页面中：

总之，这就是解决方案（我提到的页面链接了一个实时演示）：

HTML

<label for="input1" class="radio_image">
 <input type="radio" name="input" id="input1" />
 <span>Option 1</span>
</label>

由于跨距位于标签内部，单击它将产生与单击单选按钮本身相同的效果，因此单选按钮仍然可以正常工作

我在一个开发环境中工作，所以我不能向您发布url，但是通过上面的代码和链接，我认为很容易看到

如果您只想针对Chrome，可以尝试本文提供的解决方案：

我希望它能有所帮助，我不喜欢这样一种复杂的方式来呈现一个简单的单选按钮，在我的例子中，我在我的网站上唯一一个有这个问题的页面上使用了它，它工作得很好。
这里有一个替代解决方案，它不使用图像（也不使用单选css编辑）。
解决方案会在单选按钮周围形成一个圆形白色圆圈（如果您的设计允许），请尝试以下操作：

html:

就是这样
 更好的解决方案，不必使用图像：

将radio元素包装在一个div中，并将该div的溢出设置为hidden，将border radius设置为100px。然后将收音机输入设置为“显示块”，且无边距。这对我很有用：

标记：

<div class="radio_contain">
    <input type="radio" id="r1" name="r1">
</div>

我在我正在工作的站点的一些对话框中的一些按钮和单选按钮上看到了类似的问题。否-涉及webkit背面可见性。我在我的网站上有几个非常相似的对话框；奇怪的是，有些人有这个问题，有些人没有。我担心我正在做的事情太复杂了，无法在这里发布，而且还在开发中，所以我不能仅仅提供一个链接。但值得一提的是，它可能与webkit背面的可见性无关，并且会影响按钮和单选按钮。它们的共同点是弯曲的边缘。（所谓“非常相似的对话框”，我的意思是彼此相似，而不是与原始海报相似）我在谷歌地图上打开表单时遇到了同样的问题，但我解决了隐藏地图的问题：P
<span class='radioWrap'><input type='radio'...></span>

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

<div class="radio_contain">
    <input type="radio" id="r1" name="r1">
</div>

.radio_contain {
  display: inline-block;
  border-radius: 100px;
  overflow: hidden;
  padding: 0;
}
.radio_contain input[type="radio"] {
  display: block;
  margin: 0;
}