
Frosted Glass/Panel Effect, Cross Browser Solution, Vanilla JavaScript and CSS - frosted-panel
https://github.com/cryptodescriptor/frosted-panel
======
andrethegiant
Safari can do this with one CSS rule:
[https://webkit.org/blog/3632/introducing-backdrop-
filters/](https://webkit.org/blog/3632/introducing-backdrop-filters/)

~~~
progers7
This was recently implemented in Chromium-based browsers (M76) too.
[https://web.dev/backdrop-filter](https://web.dev/backdrop-filter) has some
more information about the CSS, and
[https://www.chromestatus.com/feature/5679432723333120](https://www.chromestatus.com/feature/5679432723333120)
has more information about the implementation.

~~~
heycam
And this is landing very soon in Firefox, behind a pref.
[https://twitter.com/svoisen/status/1159322370122768384](https://twitter.com/svoisen/status/1159322370122768384)

~~~
frosted-panel
As of yet, the browser support for this is very shoddy. Not to mention
outdated/legacy browsers like IE.

------
toastal
That's one of the worst images you could choose to demo this. You can barely
see anything blurred because the cloudless sky is just a gradient.

~~~
frosted-panel
For the most part it is fine, apart from the "auto auto" breakpoint.

edit: Demo is changed slightly on smaller screens to better demonstrate the
blur.

------
frosted-panel
As of BETA_v1.6 is should be working in most Safari versions, excluding the
very old one's that don't support SVG or flexbox! I do not know about Firefox
focus, but I have changed a few things that I think could have made it work in
that browser too.

Things changed:

\- Reverted back to using xlink:href rather than href attribute within the
image element (the newer href attr was not supported in Safari)

\- Added two new attributes inside the filter element:

1) filterRes (needed for Safari to display the blur on page load without being
prompted by a resize)

2) color-interpolation-filters (some older versions of Safari were using a
different variation of this filter and the blur effect would't look right)

\- Autoprefixed main.css for older browser compatibility

------
anewguy9000
there are a few of these libraries but as far as i can tell they are just
hacks that only work with a background image, and are thus not a drop in
replacement for _backdrop-filter_. a replacement for _blur_ maybe.

~~~
frosted-panel
All of the libraries I have seen seem to just be jquery libraries that apply a
blur CSS effect to DOM elements. This is NOT supported very well accross
different browsers.

Frosted Panel is a cross browser solution which allows you to have a full
scale, centered, background-image with a responsive, blurry panel overlapping
it, of which you can put whatever content you would like inside.

It works by taking advantage of SVG filters, which are supported in most (if
not all) browsers, while panning and zooming a duplicate SVG image of the
original background-image in order to mimic the actual background-image of the
body tag.

~~~
anewguy9000
nice, thanks for the details

------
continuational
Nice - though the effect doesn't seem to work on iOS Safari (iPhone XS).

~~~
frosted-panel
Updated, please try the demo now: [https://cryptodescriptor.github.io/frosted-
panel](https://cryptodescriptor.github.io/frosted-panel)

------
Theodores
Why support Internet Explorer?

Also the extra element attributes are not 'data-' attributes and will not
validate as HTML5.

Webkit/Blink/Firefox on mobile/desktop is all there in the referred to
article. Edge is soon to be Webkit so for me the target browser list is not as
extensive as for some. IE is depreciated and was never HTML5.

Can we just have this smaller list of browsers, CSS only and HTML5 valid with
no warnings?

Apart from that, great work!

~~~
frosted-panel
I should probably follow the spec, but I think having "data-" prepended to
every custom attribute on the frosted-panel div will take up unnecessary
space.

Why support IE you ask? Why not? Some clients force their devs to support
legacy browsers such as Internet Explorer.

------
the8472
Wouldn't this also be possible without javascript by nesting HTML inside SVG?

~~~
frosted-panel
Only if you wanted the whole page blurred, in this instance we want only a
small part of the background image blurred, so we have to do all sorts of
fancy panning and zooming to the SVG image so we can mimic the movement of the
actual background-image.

------
frosted-panel
Frosted Panel is a cross-browser compatible library written in pure Javascript
to achieve a responsive "Frosted Glass" effect.

~~~
jsf01
This is a cool effect. One thing about your marketing though... “Cross-
browser” should include mobile browsers. At least on iOS Safari it’s not
working. If you haven’t handled testing the major browsers yet, you should
refrain from using that as a key selling point.

~~~
colejohnson66
What version of iOS are you using? It works for me on iOS 12.3.1

~~~
frosted-panel
Safari should now be working in all versions that support flexbox and svg
images with filters! Please read the new reply I made to this thread for more
information.

