自定义复选框（单选）在缩放时不居中

Question

我正在为 chrome 浏览器写一个扩展。将带有两个自定义复选框和标签的块添加到我需要的页面。问题是当缩放页面时，radio 的内部选择开始表现异常，改变形状并移出中心

我不知道是什么导致了这个问题。我为 before 元素尝试了不同的定位选项，但它只适用于一页比例。 ChatGPT 和来自 YouTube 的印度人没有帮助。你是我最后的希望:( 这是我的 script.js 代码和样式 style.css

脚本.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);

样式.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;
}

提前感谢您的回复！