Content editable cuts off first character

I have an issue with a content editable span whereby when I delete the existing characters and then try to insert new characters, it will cut off part of the first character on safari mobile (happens on ipads and iphones)

* {
  box-sizing: border-box;
}
.product-checkbox__quantity-holder {
  margin-top: .5rem;
  display: flex;
  flex-direction: row;
  border: 1px solid #c6c6c6;
  background: #fff;
  border-radius: 5px;
  padding: 1rem 1.25rem;
  width: 100%;
  overflow: hidden;
  position: relative;
}
.product-checkbox__quantity-holder .quantity-span {
  outline: none;
  flex-shrink: 1;
  margin-right: .5em;
  max-width: 80%;
  white-space: nowrap;
  overflow: hidden;
}
.product-checkbox__quantity-unit {
  flex-grow: 1;
}

<span class="product-checkbox__quantity-holder">
  <span class="quantity-span" contenteditable="true" tabindex="1">0</span>
  <span class="product-checkbox__quantity-unit">Unit</span>
</span>

If you delete the 0 and then enter some text, the first character is always cut off. Does anyone know how to solve this please.

Solution

I am pretty sure your quantity-span will be overlapping your product-checkbox__quantity-unit. And since your quantity-span has overflow: hidden a part of the text wont be visible.

Change the margin-right: .5em to padding-right: .5em; to see if it still happens