firefox中使用引导的单选按钮很模糊

我用boostrap来显示一些单选按钮。在Chrome和Edge中，按钮看起来很清晰，但在Firefox（52.0.2 32位）中，按钮非常模糊

示例html：

<div class='container'>
  <form class="form-horizontal">
    <div class="form-group">
      <label class="radio-button"><input class="form-control" name="radioName" type="radio" value="1"> Yes</label>
      <label class="radio-button"><input class="form-control" name="radioName" type="radio" value="0"> No</label>
    </div>
  </form>
</div>

这里是jsfiddle（）

以下是示例图像：

铬

边缘

火狐

---

我使用的是同一版本的64位firefox，并且渲染正确。我可能需要卸载/重新安装firefox。今天晚些时候我会试试。我卸载/重新安装了32位版本。这没有改变任何事情。我下载了64位版本，这也没有改变任何东西。这可能不是真正的编程问题，因为其他人无法复制它。是的。奇怪，我也有这个问题。非常相似。在我的例子中，单选按钮在上下文中太小，所以我使用transform:scale（2）。这在Firefox中只导致了OP中显示的问题。我对此进行了大量搜索，并且提供了许多使用不同样式的解决方案。什么都没起作用。

label.radio-button {
  align-items: center;
  display: inline-flex;
  height: 34px;
  margin: 0 15px 0 0;
}

label.radio-button input[type=radio] {
  border: none;
  box-shadow: none;
  display: inline-block;
  height: 30px;
  margin: 0 5px 0 0;
  width: 30px;
}