Странности эффекта BLUR в браузерах / firefox :: браузеры :: chrome :: программирование :: geek :: приколы для программистов :: css :: html

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

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

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

xo^0J!jB||!ZOW
эшсичэ,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

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

хром, я блюра не чувствую!

01.06.2021, 06:32

+2,1

в Хроме таки все ХОРОШО!

01.06.2021, 06:38

+0,3

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

01.06.2021, 06:39

-0,8

https://caniuse.com/css-backdrop-filter

01.06.2021, 06:34

+0,2

Тут нужен купон "Пидоры помогите". Без него помогут 50/50, а с ним - 80/20.

01.06.2021, 06:34

+1,0

StackOverJoy

01.06.2021, 06:36

+3,5

перепрофилируемся!

in
/ iS,firefox,браузеры,chrome,программирование,geek,Прикольные гаджеты. Научный, инженерный и айтишный юмор,приколы для программистов,css,html

01.06.2021, 06:37

+4,8

а талоны где взять?

01.06.2021, 06:46

+0,1

https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/blur()

01.06.2021, 06:34

+0,1

да оно РАБОТАЕТ
это блурит сам объект - т.е. тот самый DIV который с инфой у меня поверх появляется.
А мне надо блурить то чо позади! А там динамичный CANVAS!

01.06.2021, 06:45

+0,6

так подложи один див под другой и блюрь нужный

01.06.2021, 07: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'
о
о
3

01.06.2021, 06:34

+1,4

ДА!
но там же : https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter
указана 70 версия

а у меня:

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

01.06.2021, 06:43

-0,1

■■
backdrop-filter 76 17 70 jM No 63 9 -X- 76 76 No * 54 9 -X- 12.0
▼ ▲ I ▼ ▼ ▼ ▼ ▼ ▼
70'm From version 70: this fe< to true) and the gfx.i visit about:config. ature is behind the layout.css.backdrop-filter.enabled preferences (needs to be set /ebrender .all preferences

01.06.2021, 06:44

+2,0

хммм... т.е. это надо на сайте пользователям такую инструкцию давать чтоб нормально отображалось? Из-за одной странички лезть куда-то в дебри спец-настроек... :(

01.06.2021, 06:49

0,0

Грабь фрагмент под этой плашкой, блурь его сам и потом показывай картинкой!

01.06.2021, 07: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.,firefox,браузеры,chrome,программирование,geek

01.06.2021, 06:44

+0,6

о чудный мир верстки, как много тебя в нем еще ждет чудных открытий :)
Для старых браузеров и фаерфокса блюр делают на основе дубля картинки, но это канает если у тебя четкое позиционирование, а если динамика и прыгает туда сюда, то ну его нафик, убери стекло и не еби себе мозг ))

01.06.2021, 06:39

+1,6

у меня позади динамичный CANVAS
т.е. SWF flash переделанный через AdobeAnimate под Canvas2D

01.06.2021, 06:51

0,0

так у канваса тогда есть свой блюр, программный а не стилями. Точно не помню, но вроде что типа такого - canvas.style.webkitFilter = "blur(8px)"; Либо юзнуть библиотечку для большей кроссбраузерности

01.06.2021, 06:55

0,0

да так мороки много потом сопоставлять адобовскую координатную систему с Хтмл.
Но наверное придется :(

01.06.2021, 07: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

01.06.2021, 06:41

+0,6

ЧУДЕСА!!!

01.06.2021, 06:41

+0,2

У меня есть предположение, что дело в твоём оформлении системы ("классическая" а-ля win98), и огнелис считает "у него комп говно, снижаю графон". Чисто для эксперимента попробуй современное оформление рабочего стола врубить.

01.06.2021, 08:27

-0,1

ну я всякие эти хуйни глянцевые сразу в винде всегда отрубаю. Да, у меня все красиво - как win98 :)

01.06.2021, 08:54

0,0

Просто есть вариант, что браузер считает "хуйни глянцевые" отключены и блюр иже с ними. У хромого движка триллион костылей на все случае, чтобы отрисовывать всё что надо. Если нет аппаратного блюра, он процом его отрендерит.

01.06.2021, 08:59

0,0

включил/выключил режим не влияет :(

01.06.2021, 09:04

+0,6

Как-то лет 5 назад хотел сделать блюр, а он работал нормально только в хромоподобных браузерах. Я смотрю, ничего не изменилось.

01.06.2021, 09:09

0,0

Незнаю как там дела на Яблоках и с Эджем дело не имел (у меня Win7) но Эдж ведь тоже на Хромиум.

В Хроме у меня коряво WebGL работает, а FF лучше. С блюром так и не решил :(
мысли есть...

02.06.2021, 12:21

0,0

Нужно флаг поставить в скрытых настройках браузера.

01.06.2021, 09:21

0,0

Я уже писал что не вариант. Как оно будет на деле?
Заходишь на сайт а там Alert("Включите эту хуйню в настройке...")
Так??

02.06.2021, 12:22

0,0

https://platform-status.mozilla.org/#css-backdrop-filter

02.06.2021, 11:53

0,0

Еще одна беда (не в тему уже) :
в мобильных браузерах backgroundSize: cover коряво работает ли вообще никак :(
при этом с Блюром всё ОК :)

...была одна головная боль, теперь 2

02.06.2021, 12:25

0,0

Чтобы написать коммент, необходимо залогиниться

Похожие посты ↓↓↓

4728214, 4847567, 4709082, 235178, 141398, 1216323, 4380421, 130793, 138756, 223898, 3971473, 154966, 96862, 4064068, 62228