Что это за полосы и как их убрать (IE11 + Bootstrap 4)?

Question

[oink]

Добрый день, почему инпуты в стандартной модальной форме Bootstrap 4 ведут себя таким образом при фокусе на них в Internet Explorer 11? Думал, может, локальные файлы не хочет нормально обрабатывать. Залил на хостинг, ничего не изменилось. Это настройки ActiveX неправильные?

Comments

[oink]

kde_debian, вряд ли связь есть, не было ни ноутбука, ни гибернации. Только один макет, только в одном месте, только в IE. Видеокарта в порядке.

[jamtuson]

@media all and (-ms-high-contrast:none)
     {
     
     *::-ms-backdrop, input { border-color: none!important; box-shadow: none!important } 
     }

Answer 1

[oink]

Как обычно, выручил Stack Overflow. Судя по всему, это известный баг IE, который не дает нормально обрабатывать значение box-shadow (особенно когда оно анимировано). Один из обходных вариантов (ссылка ниже) - банально поместить псевдоэлемент с совпадающим цветом фона за область, где этот баг проявляется. Если фон сложный - все равно будет некрасиво, думается мне, но мне повезло.
https://stackoverflow.com/questions/22161981/remov...

Answer 2

[AleninD]

Может стили обнулить или переписать через префикс чисто под IE? Была похожая проблема на Opera, все решилось переопределением стилей конкретно для этого браузера.

Comments

[oink]

В смысле, reset/normalize + autoprefixer? Не помогло, к сожалению.

[AleninD]

oink, нет, напрямую прописать в стилях:

@supports (-ms-ime-align:auto) {
         .name-your-class {
             border: none;
             outline: none;
}
}

Это к примеру, автопрефиксер не помогал.

[oink]

AleninD, может, не так что-то делаю, конечно, но тоже не помогло. Судя по всему, проблема не в аутлайне, а в рендеринге transition+border или box-shadow.

[AleninD]

oink, Попробуйте открыть в отдельном окне Devtools, посмотреть что генериует браузер при наведении на элемент, и перекрыть эти правила, но уже только с !important, если юзали бутстрап полностью, а не только его сетку, приходится каскадом или !important перекрывать стили.

[oink]

AleninD, нашел решение, см. ответы.

Answer 3

[Lord_Dantes]

Поставьте всем формам outline: 0

Comments

[oink]

К сожалению, не помогло.

Answer 4

[Владимир Голубь]

* {
outline: none;
}

Comments

[oink]

К сожалению, не помогло.