In case your missed our tweet from earlier, today we built a really cool demo using Ionic to showcase the frosted glass effect recently made popular by iOS 7. Basically, we are blurring not only the top layer, but the content underneath it.
Head over the the Demo Page and check it out. We’d love to see how you use it in your own apps!
P.S. We will be periodically building new demos to show off interesting ui interactions like this one and previous ones. I would love to hear your ideas for future demos you think would be useful and fun. Post an idea here or you can always tweet at us!
I really love the effect. It would go over really well in the iOS 7 world.
However, I can’t help but wonder if this was possible just using a fixed header with opacity. Couldn’t the content have just scrolled underneath the header and been blurred by the header opacity?
As designed right now, the entire content is cloned in memory and then appended into the doc again. It seems like a lot of overhead for a small bit of content. For a LOT of content, it could really kill performance, right?
It doesn’t create the same effect. If you were to just change the opacity and use a WebKit blur filter, the entire header would be blurred but not the content. I’ve tried to do the ios7 blur with just CSS and it never comes out right.
This seems to be the best way to produce the desired effect. Have a look at this code pen to see another example. JavaScript is going to be needed. Maybe CSS regions could be used and it could reduce the over head, but it’s not widely supported
Yea, unfortunately it’s not a solution that will scale, since it really is just cloning the content area and our directive wasn’t built to be generic enough (more as a demo to show that it’s possible if you absolutely need to have it).
Unfortunately, transparency or a webkit blur wouldn’t have the same effect as the content underneath isn’t being transformed.
Over time we will reevaluate this and see if it’s something that can be done generically as browser support improves.
I don’t exactly understand. May someone elaborate? I’m on an Android mobile, I only see like a blank ionic template with a styled like chat with photos that appear filtered. I see no blurry content. What exactly are you all talking about?
If someone is interested in getting the frosted glass effect for ionic 2 rc4, I’ve created a repo here. This blurs the whole background e.g. for using a popup. It works for both iOS and Android.