自动填充输入时的视觉错误

Question

我有一个带有一堆输入的 html 表单。当 Safari 自动填充输入然后我尝试编辑输入时，字符串会出现奇怪的重叠。

如果我四处点击，它似乎会自行修复，但不是在第一次点击之后，也不是当我只是专注于另一个输入时。我将附上影响我输入的样式。不确定这是我的错误还是 Safari 中的错误，但它似乎并没有发生在其他输入字段上......

input:is([type="text"],[type="number"],[type="email"],[type="tel"],[type="url"],[type="date"]),select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-border-radius: 0;
    background-color: #ffffff;
    margin: 0;
    max-width: 100%;
    max-height: 2.75em;
    border: var(--approx-1px) solid var(--color-gray);
    border-radius: 0;
    padding: var(--spacing-default);
    color: var(--color-darkblue);
    font-size: 1em;
    font-family: inherit;
    text-align: center;
    text-align-last: center;
    display: inline-block;
    vertical-align: middle;
    position: relative;
}
:is(input,select):is(:hover,:focus) {
    border-color: var(--color-darkblue);
    outline: transparent;
}

感谢任何想法。