Hacker News Reader

Comment by alexfringes | Hacker News Reader

Nice attention to detail in this. By the way, it seems like the new view's shadow in the original actually loses opacity as that view leaves the screen. Did you look around for the blur effect at all? You mentioned it but any luck beyond that? I've seen some attempts but nothing useful.

View on HN

Yeah, the iOS 7 'frosted glass translucency is impossible to achieve with CSS. Everyone points to filter: blur(), but that only blurs the element, and not items behind it.

The only thing I could come up with was using something like HTML2Canvas[1] to render a portion of the DOM in a canvas/image, position that exactly on top, and then blur that. But all that seems quite convoluted and heavy, so decided not to invest any energy into it.

[1]: https://github.com/niklasvh/html2canvas

You can blur everything, you just need to point the elements.

I've looked into this as well. At the moment it is impossible to achieve this effect in plain HTML/Javascript/CSS. It would probably need some Canvas/WebGL magic to work for live content below the navigation bar, but that feels like overdoing it. Achieving blur in CSS is possible, but it's different - you apply blur to an element itself, not to a background of element that covers it.

This demo comes close (only works on the phone, and make sure to swipe up to see the menu): http://dl.dropboxusercontent.com/u/2220075/ios7/lax.html

I forget where this comes from, I just have the link.

Yes, I've seen it an a few others demos. But the difficulty here is to make the content blurred while it scrolls. It's extremely smooth on iOS 7 beta and I can't see anyway to reproduce properly in HTML without severely compromising the performances.

I think this is actually possible if you use synthetic scrolling (i.e. interpret touch events, compute intertia and use translate3d + requestAnimationFrame). You'd basically have 2 copies of the content area, one blurred w/ css and one not blurred. Render the blurred one above the non blurred one and scroll them in lock step.

You can probably get ok performance if you don't have a lot of images.

A high quality implementation of synthetic scrolling is available at http://github.com/zynga/scroller if you want to play with it.

Hmm, I've tried something like that (although not as elaborate), but it really was sluggish... It may work but I think you should at least need an iPhone 4S or 5.

As I said, it's hard/close to impossible to reliably achieve this effect for live content. With static content you can use CSS filters to do the blurring.

Would one of these solutions work?

http://stackoverflow.com/questions/17034485/ios-7s-blurred-o...

Also: http://www.blurjs.com/

Reply on news.ycombinator.com