Safari：Caret在文本输入中复制自己？

Question

我目前正在使用Safari中的插入符来表现一些奇怪的行为。在输入内容后移动插入符号时，它会按预期更改其位置，但会留下副本。 （见附件GIF）。

这是在React环境中，到目前为止我只是在一个固定的模态中经历过它。

代码并不是特别的，所以这可能是某种浏览器错误：

<div
  className={classNames('xxx-input', !!this.state.error && 'error')}
  style={this.props.style}
>
  {this.props.label &&
  this.props.label.length > 0 && (
    <span className="label">{this.props.label}</span>
  )}
  <div className={'xxx-input-elements'}>
    <input
      className="xxx-input-field"
      value={this.props.value}
      placeholder={this.props.placeholder}
      onChange={this.props.onChange}
      type={this.props.type}
      disabled={this.props.disabled}
      style={this.props.inputStyle}
      {...props}
    />
  </div>
  <div className="error-label">
    {this.state.error || this.props.errorText}
  </div>
</div>

.xxx-input {
  display: flex;
  flex-direction: column;
  margin-top: 10px;
  width: 100%;

  .xxx-input-elements {
    align-items: center;
    border-bottom: 1px solid $xxx-input-border-color;
    display: flex;
    height: 36px;
    width: 100%;

    span {
      margin-right: 5px;
    }

    .xxx-input-field {
      background-color: $xxx-input-background-color;
      border: 0;
      border-radius: 0;
      height: 100%;
      outline: 0;
      padding: 0;
      width: 100%;
    }
  }
}