Blurred (Frosted glass) effect on navbar/toolbar

[nolimits4web]

This is a killer feature of iOS 7 ui, so we definitely need it:)
Any thoughts on how realize it, perfectly with CSS only.

I discovered pure CSS solution using CSS regions, it works perfect on desktop Safari, but super slow and buggy on iOS, so we need something different.

It is also possible do it with JS by duplicating content, but it is not an option because we will have a lot problems when we need to update content there (in duplicated layers)

[ptb]

Can you provide an example screenshot of what you're looking for?

[ptb]

I'm assuming you're looking for something like -webkit-filter: blur(2px); but I'm not sure. It would have to blur a separate background element and not any of the text elements. ;)

[nolimits4web]

Here it is http://jsfiddle.net/3SyzN/11/
Open in desktop Safari

[nolimits4web]

As you may see it looks pretty cool:) The same "frosted" bars are used everywhere on iOS. The problem in fiddle is that scrolling doesn't work on iOS. And if i add -webkit-overflow-scrolling to .page-blur-content then everything just disappear on mobile Safari))

[thilak-rao]

Using CSS filter causes a lot of performance issues.

[vscholz]

SVG filters might be a solution.

http://viget.com/inspire/frosted-glass-effect-with-blur-filters-and-masks

[nolimits4web]

Closing for now as there is no good way to realize it at the moment

[dieulot]

I just randomly stumbled on this article. I didn’t read much of it, but one thing caught my attention: the guy uses OpenGL to do blur.

iOS 8 brings WebGL to Safari and web views.

I don’t know much about WebGL, I guess to achieve a live blur effect on HTML elements it would need to take a “screenshot” of the part to blur and update it live (including, most importantly, when scrolling). Sounds like two impossible things, but maybe you’re determined enough to tinker with this. :)

[nolimits4web]

Nice article, but you are right, it sounds like two impossible things :) But will see, i still hope that they stabilise css regions API in iOS 8, and it would be possible without a hassle

[mkrikson]

Now 2016. Still no chance?

[ZanderBrown]

backdrop-filter: blur(10px); should do on iOS devices (no support in Chrome or Firefox)

[mkrikson]

Yeah only supported by safari and iOS safari: http://caniuse.com/css-backdrop-filter

But this enough for iOS theme

[Dielz98]

+1 for Frosted glass

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.