转换：在 Firefox 中翻译不精确？答案

【问题标题】：Transform: Translate Imprecise In Firefox?转换：在 Firefox 中翻译不精确？
【发布时间】：2020-09-23 15:11:42
【问题描述】：

Codepen

我刚刚创建了一个自定义选择弹出窗口。现在在其他浏览器中检查它，我无法避免，但请注意单选按钮内白色“点”的小偏移，Firefox 呈现。 Chrome 和 Edge 会很好地显示它，但 Firefow 不会。出于好奇，我想知道，为什么会这样？ 以及如何避免？

“点”：

&::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50%;
  height: 50%;
  border-radius: 50%;
  background-color: var(--light);
  transform: translate(-50%, -50%);
}

整个单选按钮：

input[type=radio] {
  position: relative;
  height: 24px;
  width: 24px;
  margin: 0;
  border-radius: 50%;
  border: solid 1px var(--light-contrast);
  background-color: var(--light);
  appearance: none;
  cursor: pointer;
  
  &:checked {
    border-color: var(--accent);
    background-color: var(--accent);
  }
  
  &:focus {
    outline: 0;
  }
  
  &::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50%;
    height: 50%;
    border-radius: 50%;
    background-color: var(--light);
    transform: translate(-50%, -50%);
  }
}

整个sn-p：

:root {
  --dark: #212121;
  --dark-contrast: #424242;
  --light: #fafafa;
  --light-contrast: #cfd8dc;
  --accent: #2196f3;
}

*,
::after,
::before {
  box-sizing: border-box;
}

html {
  font-family: 'Roboto', sans-serif;
  font-size: 1rem;
  line-height: 1.5;
}

body {
  display: grid;
  place-items: center;
  height: 100vh;
  margin: 0;
  background-color: var(--dark);
}

ul, li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.select {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 300px;
  background-color: var(--dark-contrast);
  color: #fff;
  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  user-select: none;
  padding: 1.25rem 1.5rem;
  border-radius: 4px;
}
.select:focus {
  outline: 0;
}
.select:focus .list {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  pointer-events: all;
}
.select:hover {
  background-color: #484848;
}
.select::after {
  display: inline-block;
  content: '';
  border-left: .3755rem solid transparent;
  border-right: .3755rem solid transparent;
  border-top: .375rem solid #fff;
}
.select .list {
  position: fixed;
  top: 50%;
  left: 50%;
  width: clamp(300px, 75vw, 320px);
  border-radius: 4px;
  background-color: var(--light);
  color: #000;
  transform: translate(-50%, -50%) scale(0);
  transition: all 400ms ease;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
}
.select .list label {
  display: flex;
  align-items: center;
  padding: 1.25rem 1.5rem;
  cursor: pointer;
}
.select .list label:hover {
  background-color: #ededed;
}
.select .list label:active {
  background-color: #e1e1e1;
  transition: 200ms ease;
}
.select .list label input[type=radio] {
  margin-right: 1rem;
}

input[type=radio] {
  position: relative;
  height: 24px;
  width: 24px;
  margin: 0;
  border-radius: 50%;
  border: solid 1px var(--light-contrast);
  background-color: var(--light);
  appearance: none;
  cursor: pointer;
}
input[type=radio]:checked {
  border-color: var(--accent);
  background-color: var(--accent);
}
input[type=radio]:focus {
  outline: 0;
}
input[type=radio]::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50%;
  height: 50%;
  border-radius: 50%;
  background-color: var(--light);
  transform: translate(-50%, -50%);
}

<div class="select" tabindex="1">
  Select
  <div class="list">
    <label for="select-radio1">
      <input type="radio" id="select-radio1" name="select-radio">
      Chrome
    </label>
    <label for="select-radio2">
      <input type="radio" id="select-radio2" name="select-radio">
      Safari
    </label>
    <label for="select-radio3">
      <input type="radio" id="select-radio3" name="select-radio">
      Firefox
    </label>
  </div>
</div>

【问题讨论】：

您的 sn-p 和在最新的 Firefox 中查看的 CodePen 链接似乎完全对齐。一定是别的什么东西让这个位置掉了下来。顺便说一句，我只发现 Chrome 在转换翻译时存在显示错误。
这是子像素的问题。你的输入是24px 宽，你之前的11px，留下13px 等份分派。
@Simplicius 简短回答：是的。
@Simplicius 当然。我在这里有一个旧答案：stackoverflow.com/questions/14677490/…
@SJacks，谢谢，我去看看。

标签： html css

【解决方案1】：

不同浏览器处理亚像素渲染的方式不同。

正如this SO-Post 所说：

[...] 问题源于浏览器之间亚像素计算的不同方法。

另外：没有跨浏览器解决方案，只有解决方法。

【讨论】：