named-region is not coming yet
iOS 7’s frosted glass style UI is beautiful. Let’s build it on the web.
There are a couple examples out there for applying blur effect to navigation bar or image.
But these examples are not perfect.
If you use filter: blur, the edges aren’t blurred and still sharp.
Using html2canvas is better but it’s not able to blur cross-domain images.
Even though actually there is a perfect solution using the experimental web platform features on Google Chrome.
So it seems that it’s only a matter of time until we can use named-region.
However, I found a solution not using the experimental features(a proof of concept).
It is a little tricky but works fine on the famous browsers even on iOS safari.
It’s usable if you have a simple web page.
DEMO
Here is live demo.
Source, and video:
Copy all DOMs into blurry viewport, blur and scroll it
How it does is pretty simple.
The entire document is copied into blurry content wrapper at loading time.
And it applies blur effect to the entire content.
The blurry viewport scrolls corresponding to the scroll position of the page when you scroll down the page.
Duplicated DOMs potentially causes bug on your web page
This solution works fine though duplicated DOMs always exist on your document.
It could be a potential of bugs in CSS and DOM manipulation.
Be careful if you use this method.
