[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在某些浏览器中会变得非常像素化]