У меня проблема с 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;
}
}
}