Проверил в Chrome, Safari и Opera - не повторяется.
Поставил для интереса Yandex-браузер - есть подобное поведение, видимо из-за backdrop-filter. Если закомментировать эти две строки, то все хорошо.
https://caniuse.com/#search=backdrop-filter
Про поддержку конкретно в яндекс-браузере не понятно. Хотя странно, что в хроме и опере проблемы нет, вроде бы и движок одинаковый. Может быть по-умолчанию за флагом спрятано...
Genri_Rus, dmv
Варианта всего два, 1) либо полифил (гуглите "backdrop filter polyfill", их много, один другого страшнее)... либо 2) он же - правильный вариант, это оставить бекдроп, но закрыть его использование для Яндекс.Браузера правилами (определять через JS и вещать класс/флаг на body ) и реализовать более плавный градиент (аля симулировать бекдроп размытие) в вашей плашке с инпутом. Да, прийдется поковыряться и продумать все правила относительно масштаба и возможных вариаций положения плашки, но calc() вас выручит.
Ещё, можно написать баг-репорт в Яндекс, раз уж поддержка данного браузера для вас важна. Это дешевле, чем городить огород по варианту 1 из полифила ради такой сомнительной красоты, которая сожрёт ресурсы ЦП и будет вешать клиент... уж поверьте, я понимаю о чем говорю.
Александр, понятно
Вот пример: https://codepen.io/Genri_Rus/pen/jOEQQPB
Мне нужно что-то похожее, если убрать фильтр, то размытие исчезает
P.S. А ваш вариант можно наложить так, чтобы размытие было под инпутом ?
Genri_Rus, через полифил (не обязательно через тот, что я показал выше, их много, есть более удачные... я когда то пробовал через fastblur.js) можно... но это долго кодить, и я не буду))) Я вам просто советую, бросьте эту затею... вы этот инпут на конкурс отправлять собрались что ли!? Когда реализуете это не через нативный бекдроп, а через костыль (крови он у вас попьёт, уж поверьте) то попомните мои слова.
