Custom checkbox (radio) not centred while zooming

I am writing an extension for chrome browser. A block with two custom checkboxes and labels are added to the page I need. The problem is that when scaling the page, the internal selection of the radio starts to behave strangely,changes shape and moves out of the center

I can't figure out what is causing the problem. I've tried different positioning options for the before element, but it only works for one page scale. ChatGPT and the Indians from YouTube did not help. You are my last hope :( Here is my script.js code and styles style.css

script.js

const checkbox1 = document.createElement('input');
checkbox1.classList.add('checkbox-container');
checkbox1.setAttribute('type', 'checkbox');
checkbox1.setAttribute('checked', true);

const enabledLabel = document.createElement('label');
enabledLabel.classList.add('label-container');
enabledLabel.appendChild(checkbox1);
enabledLabel.appendChild(document.createTextNode('Enabled'));
user_abuser_block.appendChild(enabledLabel);

const checkbox2 = document.createElement('input');
checkbox2.classList.add('checkbox-container');
checkbox2.setAttribute('type', 'checkbox');

const disabledLabel = document.createElement('label');
disabledLabel.classList.add('label-container');
disabledLabel.appendChild(checkbox2);
disabledLabel.appendChild(document.createTextNode('Disabled'));
user_abuser_block.appendChild(disabledLabel);

style.css

.checkbox-container {
  left: -4px;
  top: -1px;
  position: relative;
  width: 1.05em;
  height: 1.05em;
  border-radius: 50%;
  vertical-align: middle;
  border: 0.1em solid #656565;
  appearance: none;
  -webkit-appearance: none;
  outline: none;
  cursor: pointer;
  margin-right: 2px;
}

.checkbox-container:checked {
  position: relative;
  border: 0.1em solid #71aaeb;
}

.checkbox-container:checked::before {
  content: "";
  position: absolute;
  transform-origin: center;
  width: 0.6em;
  height: 0.6em;
  background-color: #71aaeb;
  border-radius: 50%;
  transform: translate(25%, 25%);
}

.label-container {
  cursor: pointer;
  display: block;
  margin-bottom: 5px;
}

thanks in advance for your replies!