[joegaudet]

I've seen this a bunch of places, until it's done real time with arbitrary images + content, I don't really see the value.

Would be cool if we could do it for translucent toolbar etc.

[russellsprouts]

It's difficult, because you cannot see the pixels in an HTML element's rendering with JavaScript. If you could copy a link to a canvas, then you could see if it has been previously visited, for example. So, canvases would not work.

I may be possible with SVG filters or WebGL, but that also has security implications. It's possible to read cross-origin content using timing attacks and filters. http://www.contextis.com/files/Browser_Timing_Attacks.pdf

[peterhunt]

How about this? http://petehunt.github.io/react-iphone-photos/#glass

[zuppy]

Here's a screenshot for a quick view: https://www.dropbox.com/s/35060r2obuwse4f/Photo%2014.11.2013...

It looks better when you see it moving.

[cheeaun]

Any reason why it's only available for iPhone 5?

[peterhunt]

Three reasons.

1. Blur filter is only available on WebKit 2. I know for sure how much texture memory is on an iPhone 5 3. The touch event latency on android is too damn high.

[Zecc]

>> <h1>If you see this, something is broken.</h1>

The funny thing being that I only saw that because I browsed the source, because the page was so broken for me that I only saw a black screen.

In any case, I see

    Message(null, " This demo is only available for iPhone 5 and iOS 7. Sorry! " )

So I'm out of here.

[peterhunt]

There was some small text centered on the screen specifying the demo is only available on iPhone 5 (see comment above for why)

[joegaudet]

Now this is interesting, how does it work ?

[jakobe]

They use a webkit CSS extension: "-webkit-filter:blur(5px)"

[comex]

There's a Firefox bug to implement it: https://bugzilla.mozilla.org/show_bug.cgi?id=660196

[joegaudet]

That blurs the content inside of a div, how is the content tied in, is it scroll synched?

[peterhunt]

I do synthetic scrolling (translate3d() + touch event interpretation and inertial math). Then duplicate the DOM for the top and bottom bars, adjust the positioning to make them look fluid and apply the CSS blur filter.

It's easy with React :)

[myhf]

It is done client-side in real time with arbitrary content using an SVG GaussianBlur filter. Decode the data: urls in the SVG to see the full source.

[joegaudet]

right but it doesn't work with rendered text from arbitrary html content, only by applying filters to an image.

[nraynaud]

I see a big value in UI design, where you want to make sure that the general layout of your screen is as intended.

I'm still thinking in actually making this thing as a physical object with a handle you put in front of the screen.