Transform: Translate Imprecise In Firefox? - html

Question

Codepen
I just created a custom selection pop-up. Now inspecting it in other browsers, I can't avoid, but notice the little offset of the white "dot", inside the radio button, Firefox renders. Chrome and Edge will display it just fine, but Firefow won't. And rather out of curiosity I'd like to know, why's that? And how to avoid?
The "dot":
&::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 50%;
height: 50%;
border-radius: 50%;
background-color: var(--light);
transform: translate(-50%, -50%);
}
Entire radio button:
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%);
}
}
Whole snippet:
: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>

Answer 1

Subpixel rendering is handled differently across browsers.
As this SO-Post states:
[...] the problem arises from a different approach to subpixel calculus between browsers.
Also: there is no cross-browser solution, but only workarounds.