CSS белый укус и овальная форма в блесне

Question

Я играю, создавая свою собственную библиотеку пользовательского интерфейса, я работаю над компонентом ввода, который может добавлять компоненты (например, значки или счетчик) по сторонам, и у меня есть эта странная ошибка счетчика, Есть две проблемы, которые объясняются в коде.

Если я снимаю флажок и проверяю width attr из инструментов dev, исправляется "белый укус".

PD: Пример написан в реактивном проекте, потому что я хочу добавить поведение позже, но теперь это просто css проблема.

РЕДАКТИРОВАТЬ: Это изображение овала, когда вы удаляете div "dummy-wrapper".

.container {
  display: flex;
  border: 1px solid rgba(34, 36, 38, 0.15);
  border-radius: 10px;
  border-color: teal;
  padding: 0.4em 0.5em;
  background: white;
  justify-content: center;
  align-items: center;
  width: 50%;
}

input {
  width: 100%;
  border: none;
  background: inherit;
  color: inherit;
  outline: 0;
  padding: 0em 0.4em;
  font-size: 14px;
  font-family: Poppins;
  color: black;
  /* TODO: make themeable */
  font-weight: 400;
  letter-spacing: 0.14px;
}

.spinner {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 0.2rem solid rgba(151, 159, 208, 0.3);
  border-top-color: inherit;
  animation: 1s spin infinite linear;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

<div class="container">
      <label>X</label>
      <input
        placeholder="this is a placeholder......"
        value="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s"
      />
      <!--{/* Problem 1: Without the dummy-wrapper the circle becomes an oval. */}
      {/* Problem 2: The circle has a small white bite. */}-->
      <div class="dummy-wrapper">
        <div class="spinner" />
      </div>
    </div>

Answer 1

Попробуйте использовать фиксированную px ширину границы, я думаю, это может быть ширина границы 0.2rem => 3.1875px chrome проблема разрешения разрешения.

border: 3px solid rgba(151, 159, 208, 0.3);

Answer 2

Я не вижу там никаких проблем ...?

.spinner {
  --spinSz        : 32px;  /* spinner size */
  box-sizing      : border-box;
  display         : inline-block;
  flex-shrink     : 0;
  width           : var(--spinSz);
  height          : var(--spinSz);
  border-radius   : 50%;
  border          : calc(var(--spinSz)/10) solid #1a31c54d;
  border-top-color: #830b2f;
  animation       : 1s spin infinite linear;
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

<b class="spinner"></b>