Странности эффекта BLUR в браузерах / программирование :: chrome :: firefox :: html :: css :: приколы для программистов :: браузеры :: geek (Прикольные гаджеты. Научный, инженерный и айтишный юмор)

firefox браузеры chrome программирование geek приколы для программистов css html 

Странности эффекта BLUR в браузерах

Захотелось мне сделать а всплывающего лайтбокса эффект матового стекла.
Первым делом гугл выдал мне ссылку на сайт: https://developer.mozilla.org
ну захожу беру код оттуда. Все просто : строка CSS {backdrop-filter: blur(8px);} и всё :)
но листаю ниже и :

xo^0J!jB||!ZOW эшсичэ,firefox,браузеры,chrome,программирование,geek,Прикольные гаджеты. Научный, инженерный и айтишный юмор,приколы для программистов,css,html

как так?

ведь код с мозиллы :

0 А https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter,firefox,браузеры,chrome,программирование,geek,Прикольные гаджеты. Научный, инженерный и айтишный юмор,приколы для программистов,css,html

возможно у меня FireFox старый? :

О Мо/Ла Ричг1ох Р1гей>х Browser 'У Уст^ювп^в последняя версия НеАох 88.0.1 (6+€ит***) Что нового Саааадйу&а ^тср^т ОСТАВАЛСЯ ОТКРЫТЬ*. публична и доступ*»* для осе» И КАЖДОГО. Хотите попу+>? Слегайте по*ертвос<з*«е или присоединяйтесь» ПРДМ ПМЫИ«!ОТ1 ПИКНМЯММТЯИДМ * тпгяш Р*ч*о* ■•.-я^тс*

да нет, тут все норм

Firefox Browser -У Установлена последняя версия Firefox 88.0.1 (64-6итный) Что нового,firefox,браузеры,chrome,программирование,geek,Прикольные гаджеты. Научный, инженерный и айтишный юмор,приколы для программистов,css,html

ЧТО НЕ ТАК ТО??

Подробнее
xo^0J!jB||!ZOW эшсичэ
0 А https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter
О Мо/Ла Ричг1ох Р1гей>х Browser 'У Уст^ювп^в последняя версия НеАох 88.0.1 (6+€ит***) Что нового Саааадйу&а ^тср^т ОСТАВАЛСЯ ОТКРЫТЬ*. публична и доступ*»* для осе» И КАЖДОГО. Хотите попу+>? Слегайте по*ертвос<з*«е или присоединяйтесь» ПРДМ ПМЫИ«!ОТ1 ПИКНМЯММТЯИДМ * тпгяш Р*ч*о* ■•.-я^тс* * :«>:•
Firefox Browser -У Установлена последняя версия Firefox 88.0.1 (64-6итный) Что нового
firefox,браузеры,chrome,программирование,geek,Прикольные гаджеты. Научный, инженерный и айтишный юмор,приколы для программистов,css,html
Еще на тему
Развернуть
хром, я блюра не чувствую!
в Хроме таки все ХОРОШО!
https://caniuse.com/css-backdrop-filter
Тут нужен купон "Пидоры помогите". Без него помогут 50/50, а с ним - 80/20.
StackOverJoy
перепрофилируемся!
 in / iS
а талоны где взять?
да оно РАБОТАЕТ
это блурит сам объект - т.е. тот самый DIV который с инфой у меня поверх появляется.
А мне надо блурить то чо позади! А там динамичный CANVAS!
так подложи один див под другой и блюрь нужный
Там же на MDN есть табличка
er ш n 7Г CL T 0 ■О 1 “Ь И- ОТ ® Chrome ■*vj о f¡) Edge € Firefox ü îft Internet Explorer ОТ со О Opera от X ■ Safari от от # WebView Android ® Chrome Android 173 ICD TD О 3. и о от ф 3 со Z О С Firefox for Android от 4^ О Opera Android О От- co' о о
ДА!
но там же : https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter
указана 70 версия

а у меня:
Firefox Browser -У Установлена последняя версия Firefox 88.0.1 (64-6итный) Что нового
хммм... т.е. это надо на сайте пользователям такую инструкцию давать чтоб нормально отображалось? Из-за одной странички лезть куда-то в дебри спец-настроек... :(
Грабь фрагмент под этой плашкой, блурь его сам и потом показывай картинкой!
С 70й версии она НЕ работает просто так
70 }M From version 70: this feature is behind the layout.css.backdrop-filter.enabled preferences (needs to be set to true) and the gfx.webrender .all preferences (needs to be set to true). To change preferences in Firefox, visit about:config.
о чудный мир верстки, как много тебя в нем еще ждет чудных открытий :)
Для старых браузеров и фаерфокса блюр делают на основе дубля картинки, но это канает если у тебя четкое позиционирование, а если динамика и прыгает туда сюда, то ну его нафик, убери стекло и не еби себе мозг ))
у меня позади динамичный CANVAS
т.е. SWF flash переделанный через AdobeAnimate под Canvas2D
так у канваса тогда есть свой блюр, программный а не стилями. Точно не помню, но вроде что типа такого - canvas.style.webkitFilter = "blur(8px)"; Либо юзнуть библиотечку для большей кроссбраузерности
да так мороки много потом сопоставлять адобовскую координатную систему с Хтмл.
Но наверное придется :(
вот я еще нашел пример:
https://codepen.io/GreggOD/pen/xLbboZ
CSS only frosted glass effect CetwOO h o HTML Thank* to: ht ?p» I / / »edl OB. C om/ IA*J13t5411/ fcOW- to“dO-C 9 9-e® • y• t r o * t a d - 91 a * a - • f f a ct- • 2 i i (fea f ab 0 1 cdxr claae^filurrad-bcx*» <!— yoj dont need the iMt*l>3ifi~box hit purpea its shxt <dir
ЧУДЕСА!!!
У меня есть предположение, что дело в твоём оформлении системы ("классическая" а-ля win98), и огнелис считает "у него комп говно, снижаю графон". Чисто для эксперимента попробуй современное оформление рабочего стола врубить.
ну я всякие эти хуйни глянцевые сразу в винде всегда отрубаю. Да, у меня все красиво - как win98 :)
Просто есть вариант, что браузер считает "хуйни глянцевые" отключены и блюр иже с ними. У хромого движка триллион костылей на все случае, чтобы отрисовывать всё что надо. Если нет аппаратного блюра, он процом его отрендерит.
включил/выключил режим не влияет :(
Как-то лет 5 назад хотел сделать блюр, а он работал нормально только в хромоподобных браузерах. Я смотрю, ничего не изменилось.
Незнаю как там дела на Яблоках и с Эджем дело не имел (у меня Win7) но Эдж ведь тоже на Хромиум.

В Хроме у меня коряво WebGL работает, а FF лучше. С блюром так и не решил :(
мысли есть...
Нужно флаг поставить в скрытых настройках браузера.
Я уже писал что не вариант. Как оно будет на деле?
Заходишь на сайт а там Alert("Включите эту хуйню в настройке...")
Так??
https://platform-status.mozilla.org/#css-backdrop-filter
Еще одна беда (не в тему уже) :
в мобильных браузерах backgroundSize: cover коряво работает ли вообще никак :(
при этом с Блюром всё ОК :)

...была одна головная боль, теперь 2
Только зарегистрированные и активированные пользователи могут добавлять комментарии.
Похожие темы

Похожие посты
Ф Net Healer X Свой прокси НТТР ▼ host Порт: 0 Проксируемые домены: site.com . site.net А Список проксируемых доменов разделённых пробелом. Для проксирования всех поддоменов сайта используйте точку перед названием домена, например: .site.com Сохранить
подробнее»

friGate VPN Proxy хром,google chrome приколы браузеры it блокировка сайтов интернет geek,Прикольные гаджеты. Научный, инженерный и айтишный юмор firefox Net Healer

Ф Net Healer X Свой прокси НТТР ▼ host Порт: 0 Проксируемые домены: site.com . site.net А Список проксируемых доменов разделённых пробелом. Для проксирования всех поддоменов сайта используйте точку перед названием домена, например: .site.com Сохранить
программисты варварская куча говна СВЯЩЕННЫЙ проект I СЛАВНЫЙ тимлид /ШШ ВЕЛИКАЯ архитектура ШШ(благороаный коллектив А ММ ХРАБРЫЕ |КОВАРНЫИ начальник ■¡ЁШ ПРИМИТИВНЫЕ coding practices СНОТСТАЛЫЕ петухи ВИжестокие\ А ЧСВшники LA \Ч\' \\\ч' L_\ ,/ ///' *//) /и SrcJ С ЛЧХЧ *\W чЧГ
подробнее»

приколы для даунов программирование geek,Прикольные гаджеты. Научный, инженерный и айтишный юмор программисты песочница

программисты варварская куча говна СВЯЩЕННЫЙ проект I СЛАВНЫЙ тимлид /ШШ ВЕЛИКАЯ архитектура ШШ(благороаный коллектив А ММ ХРАБРЫЕ |КОВАРНЫИ начальник ■¡ЁШ ПРИМИТИВНЫЕ coding practices СНОТСТАЛЫЕ петухи ВИжестокие\ А ЧСВшники LA \Ч\' \\\ч' L_\ ,/ ///' *//) /и SrcJ С ЛЧХЧ *\W чЧГ
№. reGUESS THE WEB BROWSER A FUN GAME FOR ALL THE FAMILY