Вставка и рамка в виде рамки: ни одна из них не вызывает мерцание полей формы в IE / Edge - PullRequest
0 голосов
/ 17 декабря 2018

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

Я прикрепил скриншот здесь Form fields flickering sample 1

Form fields flickering sample 2

Коды:

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;
        }
    }
}

1 Ответ

0 голосов
/ 17 декабря 2018

В IE свойство border-collapse: collapse; добавляется автоматически.попробуйте добавить 'border-collapse: Отдельно;в ваш класс ввода.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...