css круг становится овальным при увеличении браузера

Question

Я создал радио кнопки через css. Просто стиль на псевдоэлементах, как это: https://codepen.io/emily-green/pen/MWYQZqz

Вот это html

<label class="wrapper">
  <input type="radio" />
  <div class="label">Text</div>
</label>

<label class="wrapper wrapper--checked">
  <input type="radio" />
  <div class="label">Text</div>
</label>

Вот мой css

input {
  display: none
}

.wrapper {
    font-family: "arial";
    align-items: center;
    color: #00f;
    display: flex;
    font-size: 12px;
    font-weight: 600;
    justify-items: center;
    padding: .5rem 0 .5rem 1.3rem;
    position: relative;
    vertical-align: middle;
    white-space: nowrap;

  &::before,
  &::after {
    border-radius: 50%;
    box-sizing: border-box;
    content: '';
    display: inline-block;
    height: 14px;
    left: 0;
    position: absolute;
    width: 14px;
  }

  &::before {
    border: 2px solid #00f;
  }

  &::after {
    background: #000;
    transform: scale( 0 );
  }

  // checked
  &--checked {
    color: #000;

    &::after {
      transform: scale( .4 );
    }
  }
}

Моя проблема: когда я масштабирую с помощью браузера и включаю Windows Edge, внутренний круг теряется или внешний круг становится овальным. У кого-нибудь есть решение для этого?

Answer 1

Я не нашел решения для этого, поэтому я изменил его на встроенный SVG. Встроенный, потому что в противном случае SVG становится довольно пикселированным в некоторых браузерах