Blurred (Frosted glass) effect on navbar/toolbar about framework7 HOT 14 CLOSED

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

from framework7.

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

But this enough for iOS theme

from framework7.

+1 for Frosted glass

from framework7.

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

from framework7.

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. ;)

from framework7.

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

from framework7.

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))

from framework7.

Using CSS filter causes a lot of performance issues.

from framework7.

SVG filters might be a solution.

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

from framework7.

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

from framework7.

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. :)

from framework7.

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

from framework7.

Now 2016. Still no chance?

from framework7.

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.

from framework7.