Переключатель CSS: внутренний круг смещен во время масштабирования/уменьшения масштаба ⇐ CSS

[Anonymous]

Я разрабатываю собственный компонент Angular для переключателя с особыми требованиями к дизайну:
Размер внешнего круга: фиксированный размер 16 x 16 пикселей.
Размер внутреннего круга (проверенное состояние) ): фиксированный размер 8 x 8 пикселей.
Внутренний круг всегда должен оставаться точно по центру внутри внешнего круга, даже при увеличении или уменьшении масштаба (масштабирование браузера).
Однако, несмотря на использование различных методов CSS (например, Flexbox, Transform: Translate), внутренний круг слегка смещается при масштабировании или уменьшении масштаба в браузере. Я ищу надежное решение, обеспечивающее центрирование внутреннего круга.
Технический контекст:
Рамка: Angular 16.
Код: HTML и SCSS поддерживаются. представлено ниже.
Цель: решение CSS, обеспечивающее стабильное выравнивание внутреннего круга независимо от уровня масштабирования.
Вот мой HTML

Код: Выделить всё

И мой SCSS

Код: Выделить всё

.waldo-radio-button {
display: inline-flex;
align-items: center; /* Vertical alignment */
cursor: pointer;
position: relative;
gap: 8px;

&.disabled {
cursor: not-allowed;

.radio-button {
border-color: var(--neutral-400);

.inner-circle {
background-color: var(--neutral-400);
}
}

label {
color: var(--neutral-400);
}
}

&.checked {
.radio-button {
border: 2px solid var(--primary-600);

.inner-circle {
width: 8px;
height: 8px;
background-color: var(--primary-600);
border-radius: 50%;
transform: translateZ(0); /* To maintain sharp rendering */
}

&:hover {
border-color: var(--primary-700);
}

&:active {
border-color: var(--primary-800);
}
}
}

.radio-container {
position: relative;
width: 16px; /* Outer circle size */
height: 16px;
display: flex;
justify-content: center; /* Horizontal centering */
align-items: center; /* Vertical centering */
}

.radio-button {
width: 16px;
height: 16px;
border: 2px solid var(--neutral-500); /* Default border color */
border-radius: 50%; /* Perfect circle */
display: flex;
justify-content: center;
align-items: center; /* Center the inner circle */
transition: border-color 0.2s ease;

.inner-circle {
width: 8px; /* Inner circle size */
height: 8px;
background-color: transparent; /* Initially invisible */
border-radius: 50%; /* Perfect circle */
transform: scale(0); /* Hidden by default */
transition: transform 0.2s ease, background-color 0.2s ease;
}
}

input[type='radio'] {
position: absolute;
opacity: 0;
pointer-events: none;
}

label {
color: var(--neutral-700);
cursor: pointer;
display: inline-block;
}
}

Что я пробовал:
Flexbox: используется в .radio-container и .radio-button для центрирования внутреннего круга.
Преобразования: прикладное преобразование: масштабирование и translateZ(0) для стабилизации рендеринга.
Фиксированные размеры: установите фиксированные размеры как для внешнего круга (16 пикселей), так и для внутреннего круга (8 пикселей).

Подробнее здесь: https://stackoverflow.com/questions/793 ... oom-dezoom