Overflow: hidden - leaves tiny gaps close to the border

Question

Does anyone know how to get rid of these tiny empty spaces visible close to the border of a parent after toggling the element?

At the same time, I can't understand why it doesn't seem to be an issue in the original code that I used (source), and it works fine without declaring a display type of the parent (in my code to make overflow work I had to say display type, I've chosen flex)

html {
  display: flex;
  justify-content: center;
  box-sizing: border-box;
}
div {
  width: 300px;
}
input[id="twoPlayersMode"],
input[id="AImode"] {
  height: 0;
  width: 0;
  visibility: hidden;
}
input[id="twoPlayersMode"]:checked + label::after,
input[id="AImode"]:checked + label::after {
  transform: scale(4.4);
}
label[for="twoPlayersMode"],
label[for="AImode"] {
  display: flex;
  position: relative;
  overflow: hidden;
  background-clip: content-box;
  justify-content: center;
  cursor: pointer;
  outline: none;
  user-select: none;
  color: black;
  font-family: 'Lato', sans-serif;
  font-size: 1rem;
  letter-spacing: 0.04rem;
  padding: 1rem 1rem;
  border-radius: 0.4rem;
  border: 0.3rem solid black;
  background: white;
  box-shadow: 0 3px 0 0 black;
}
label[for="twoPlayersMode"]::after,
label[for="AImode"]::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  transform: scale(0);
  transition: transform 0.3s ease-in;
  mix-blend-mode: difference;
  background: radial-gradient(circle at center, white 24%, black 25%, black 100%);
}
label[for="twoPlayersMode"]:active,
label[for="AImode"]:active {
  top: 3px;
  box-shadow: none;
  overflow: hidden;
}

<div>
  <input type="radio" id="twoPlayersMode" name="gameModeRadio" />
  <label for="twoPlayersMode">Play against another player</label>

  <input type="radio" id="AImode" name="gameModeRadio" />
  <label for="AImode">Play against AI</label>
</div>

Answer 1

The problem is caused by using rem values in border-radius, border, and letter-spacing. The original code resets the font-size to 10px, and yours is the initial, 16px. This makes an issue with the rest of the rem values since they scale with the root font size.

Using relative values is a great practice, but some things should still be set in absolute values.

Here is your code with the fixed values:

html {
     display: flex;
     justify-content: center;
     box-sizing: border-box;
     font-size: 16px;
}
 div {
     width: 300px;
}
 input[id="twoPlayersMode"], input[id="AImode"] {
     height: 0;
     width: 0;
     visibility: hidden;
}
 input[id="twoPlayersMode"]:checked + label::after, 
 input[id="AImode"]:checked + label::after {
     transform: scale(4.2);
}
 label[for="twoPlayersMode"], label[for="AImode"] {
     display: flex;
     position: relative;
     overflow: hidden;
     background-clip: content-box;
     justify-content: center;
     cursor: pointer;
     outline: none;
     user-select: none;
     color: black;
     font-family: 'Lato', sans-serif;
     font-size: 1rem;
     letter-spacing: 0.4px;
     padding: 1.5rem 1rem;
     border-radius: 4px;
     border: 3px solid black;
     background: white;
     box-shadow: 0 3px 0 0 black;
}
 label[for="twoPlayersMode"]::after, label[for="AImode"]::after {
     content: '';
     position: absolute;
     width: 100%;
     height: 100%;
     top: 0;
     left: 0;
     transform: scale(0);
     transition: transform .3s ease-in;
     mix-blend-mode: difference;
     background: radial-gradient(circle at center,white 24%,black 25%,black 100%);
}
 label[for="twoPlayersMode"]:active, label[for="AImode"]:active {
     top: 3px;
     box-shadow: none;
     overflow: hidden;
}
 

<div>
<input type="radio" id="twoPlayersMode" name="gameModeRadio" />
<label for="twoPlayersMode">Play against another player</label>

<input type="radio" id="AImode" name="gameModeRadio" />
<label for="AImode">Play against AI</label>
</div>