Как убрать мигание внутри инпута?

Question

[Genri_Rus]

Вот пример: https://codepen.io/Genri_Rus/pen/jOEQQPB

При наведении на инпут, почему-то внутри инпута все выделяется и мигает

Answer 1

[profesor08]

Не мигает. Попробуй убрать фильтр.

Comments

[Genri_Rus]

Фильтр как раз таки нужен

Answer 2

[Александр Докин]

Имеете в виду автозаполнение поля? Тогда добавьте инпуту атрибут autocomplete="off"
https://developer.mozilla.org/ru/docs/Web/Security...

Какие-то другие "выделения и мигания" я не вижу...

Comments

[Genri_Rus]

Я про это:

[Александр Докин]

Проверил в Chrome, Safari и Opera - не повторяется.
Поставил для интереса Yandex-браузер - есть подобное поведение, видимо из-за backdrop-filter. Если закомментировать эти две строки, то все хорошо.

https://caniuse.com/#search=backdrop-filter
Про поддержку конкретно в яндекс-браузере не понятно. Хотя странно, что в хроме и опере проблемы нет, вроде бы и движок одинаковый. Может быть по-умолчанию за флагом спрятано...

[Genri_Rus]

Александр Докин, спасибо за разъяснения

Вот у меня как раз таки яндекс, странно очень (
Может как-то пофиксить можно ?

[Александр Докин]

Убрать фильтр, как посоветовал profesor08
Потому что кроссбраузерно все равно не получится, это экспериментальное свойство.

Честно говоря, не до конца понял, что вы хотите размыть и зачем)

[Genri_Rus]

Александр Докин, а может есть альтернатива этому фильтру ?

[Александр Докин]

Я не понимаю, что вы хотите сделать. Опишите словами или покажите на картинке/примере. Альтернатива есть почти всему, вопрос целесообразности.

[Genri_Rus]

Александр Докин, нужно сделать размытие в 10px
Именно размытие с таким эффектом: https://codepen.io/Genri_Rus/pen/jOEQQPB
P.S. Если внимательно присмотреться, то размытие равномерное

Answer 3

[Александр]

Genri_Rus, видимо бага движка Яндекс.Браузера.
Есть ещё один способ "с бородой". Как вариант использовать SVG в качестве фильтра https://codepen.io/wdmg/pen/YzPRdJr

Comments

[Genri_Rus]

Не совсем понятно, как сделать под инпутом ?
Сейчас фильтр накладывается поверх инпута

[Александр]

Genri_Rus, dmv
Варианта всего два, 1) либо полифил (гуглите "backdrop filter polyfill", их много, один другого страшнее)... либо 2) он же - правильный вариант, это оставить бекдроп, но закрыть его использование для Яндекс.Браузера правилами (определять через JS и вещать класс/флаг на body ) и реализовать более плавный градиент (аля симулировать бекдроп размытие) в вашей плашке с инпутом. Да, прийдется поковыряться и продумать все правила относительно масштаба и возможных вариаций положения плашки, но calc() вас выручит.

Ещё, можно написать баг-репорт в Яндекс, раз уж поддержка данного браузера для вас важна. Это дешевле, чем городить огород по варианту 1 из полифила ради такой сомнительной красоты, которая сожрёт ресурсы ЦП и будет вешать клиент... уж поверьте, я понимаю о чем говорю.

[Genri_Rus]

Александр, понятно
Вот пример: https://codepen.io/Genri_Rus/pen/jOEQQPB
Мне нужно что-то похожее, если убрать фильтр, то размытие исчезает
P.S. А ваш вариант можно наложить так, чтобы размытие было под инпутом ?

[Александр]

Genri_Rus, через полифил (не обязательно через тот, что я показал выше, их много, есть более удачные... я когда то пробовал через fastblur.js) можно... но это долго кодить, и я не буду))) Я вам просто советую, бросьте эту затею... вы этот инпут на конкурс отправлять собрались что ли!? Когда реализуете это не через нативный бекдроп, а через костыль (крови он у вас попьёт, уж поверьте) то попомните мои слова.