Вставка и граница Box-shadow: ни один из них не вызывает мерцание полей формы в IE / Edge

У меня проблема с IE / Edge. Я пытался решить это пару дней назад, но у меня нет идей. Когда я прокручивал свой веб-сайт вверх и вниз, поля формы мерцали и мигали белым, серым и синим цветами. Я обнаружил проблему, это был box-shadow: inset 0 1px 3px 0 rgba(0,0,0,0.15) and border:0;. Если я удалил атрибут inset в box-shadow или border:0 в этих полях ввода, то поля формы вернулись к нормальному поведению. Однако я хочу сохранить их на веб-сайте. Не уверен, есть ли способы обойти это.

Скриншот приложил сюда

Коды:

input[type = "text"],
input[type = "email"],
input[type = "number"] {
    height: 4.2rem;
    width: 100%;
    max-width: 40rem;
    background: $color_light_grey_1;
    font-size: 1.4rem;
    border: 0;
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.15);
    border-radius: 3px;
    padding: spacing(xxs) spacing(xs);
    transition: box-shadow 0.2s, border-width 0.2s;
    border-left: 0 solid var(--color-primary);

    &:focus {
        outline: 0;
        box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.15);
        border-left-width: 3px;
    }

    @include breakpoint(xs) {
        font-size: 1.6rem;
        padding: spacing(xxs) spacing(sm);
    }

    &.input--alternate {
        background: $color_white;
        box-shadow: $light_shadow;

        &:focus {
            outline: 0;
            box-shadow: 0 1px 1px $color_medium_grey_1;
        }
    }
}