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

andarky andarky
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
Еще на тему
firefox

firefox(347)

браузеры

браузеры(864)

chrome

chrome(310)

программирование

программирование(915)

geek

geek(17087)

Развернуть
Комментарии 33 01.06.202109:26 ссылка -2.5
хром, я блюра не чувствую!
villy villy 01.06.202109:32 ответить ссылка 2.1
в Хроме таки все ХОРОШО!
andarky andarky 01.06.202109:38 ответить ссылка ↑ 0.3
Pinguin Pinguin 01.06.202109:39 ответить ссылка ↑ -0.8
https://caniuse.com/css-backdrop-filter
Жук717 Жук717 01.06.202109:34 ответить ссылка 0.2
Тут нужен купон "Пидоры помогите". Без него помогут 50/50, а с ним - 80/20.
mr.Broken Doll mr.Broken Doll 01.06.202109:34 ответить ссылка 1.0
StackOverJoy
VAkula1 VAkula1 01.06.202109:36 ответить ссылка ↑ 3.5
перепрофилируемся!
 in / iS
VAkula1 VAkula1 01.06.202109:37 ответить ссылка ↑ 4.8
а талоны где взять?
andarky andarky 01.06.202109:46 ответить ссылка ↑ 0.1
да оно РАБОТАЕТ
это блурит сам объект - т.е. тот самый DIV который с инфой у меня поверх появляется.
А мне надо блурить то чо позади! А там динамичный CANVAS!
andarky andarky 01.06.202109:45 ответить ссылка ↑ 0.6
так подложи один див под другой и блюрь нужный
SobakaBalabaka SobakaBalabaka 01.06.202110:04 ответить ссылка ↑ 0.8
Там же на 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' о о
Laodar Laodar 01.06.202109:34 ответить ссылка 1.4
ДА!
но там же : https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter
указана 70 версия

а у меня:
Firefox Browser -У Установлена последняя версия Firefox 88.0.1 (64-6итный) Что нового
andarky andarky 01.06.202109:43 ответить ссылка ↑ -0.1
хммм... т.е. это надо на сайте пользователям такую инструкцию давать чтоб нормально отображалось? Из-за одной странички лезть куда-то в дебри спец-настроек... :(
andarky andarky 01.06.202109:49 ответить ссылка ↑ 0.0
Грабь фрагмент под этой плашкой, блурь его сам и потом показывай картинкой!
dimwalker dimwalker 01.06.202110:13 ответить ссылка ↑ 0.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.
Laodar Laodar 01.06.202109:44 ответить ссылка ↑ 0.6
о чудный мир верстки, как много тебя в нем еще ждет чудных открытий :)
Для старых браузеров и фаерфокса блюр делают на основе дубля картинки, но это канает если у тебя четкое позиционирование, а если динамика и прыгает туда сюда, то ну его нафик, убери стекло и не еби себе мозг ))
Pinguin Pinguin 01.06.202109:39 ответить ссылка 1.6
у меня позади динамичный CANVAS
т.е. SWF flash переделанный через AdobeAnimate под Canvas2D
andarky andarky 01.06.202109:51 ответить ссылка ↑ 0.0
так у канваса тогда есть свой блюр, программный а не стилями. Точно не помню, но вроде что типа такого - canvas.style.webkitFilter = "blur(8px)"; Либо юзнуть библиотечку для большей кроссбраузерности
Pinguin Pinguin 01.06.202109:55 ответить ссылка ↑ 0.0
да так мороки много потом сопоставлять адобовскую координатную систему с Хтмл.
Но наверное придется :(
andarky andarky 01.06.202110:13 ответить ссылка ↑ 0.0
вот я еще нашел пример:
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
andarky andarky 01.06.202109:41 ответить ссылка 0.6
ЧУДЕСА!!!
andarky andarky 01.06.202109:41 ответить ссылка ↑ 0.2
У меня есть предположение, что дело в твоём оформлении системы ("классическая" а-ля win98), и огнелис считает "у него комп говно, снижаю графон". Чисто для эксперимента попробуй современное оформление рабочего стола врубить.
wasd123i wasd123i 01.06.202111:27 ответить ссылка -0.1
ну я всякие эти хуйни глянцевые сразу в винде всегда отрубаю. Да, у меня все красиво - как win98 :)
andarky andarky 01.06.202111:54 ответить ссылка ↑ 0.0
Просто есть вариант, что браузер считает "хуйни глянцевые" отключены и блюр иже с ними. У хромого движка триллион костылей на все случае, чтобы отрисовывать всё что надо. Если нет аппаратного блюра, он процом его отрендерит.
wasd123i wasd123i 01.06.202111:59 ответить ссылка ↑ 0.0
включил/выключил режим не влияет :(
andarky andarky 01.06.202112:04 ответить ссылка ↑ 0.6
Как-то лет 5 назад хотел сделать блюр, а он работал нормально только в хромоподобных браузерах. Я смотрю, ничего не изменилось.
DarkCoder DarkCoder 01.06.202112:09 ответить ссылка 0.0
Незнаю как там дела на Яблоках и с Эджем дело не имел (у меня Win7) но Эдж ведь тоже на Хромиум.

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

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

реактор

хром

хром

языки программирования

языки программирования

it-юмор

it-юмор

safari

, 

html

, 

css

, 

приколы для программистов


Тренды

Новый Год
S.T.A.L.K.E.R
Arcane (LoL)
Похожие посты
Ф 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 чЧГ
№. re GUESS THE WEB BROWSER A FUN GAME FOR ALL THE FAMILY