iOS 7 Background Blur (HTML5)

HTML

<div class="frame">
    <header></header>
    <div class="apps">
        <div class="app" style="background:red;"></div>
        <div class="app" style="background:green;"></div>
        <div class="app" style="background:yellow;"></div>
        <div class="app" style="background:black;"></div>
        <div class="app" style="background:pink;"></div>
        <div class="app" style="background:blue;"></div>
        <div class="app" style="background:orange;"></div>
        <div class="app" style="background:red;"></div>
        <div class="app" style="background:green;"></div>
        <div class="app" style="background:yellow;"></div>
        <div class="app" style="background:black;"></div>
        <div class="app" style="background:pink;"></div>
        <div class="app" style="background:blue;"></div>
        <div class="app" style="background:orange;"></div>
        <div class="app" style="background:red;"></div>
        <div class="app" style="background:green;"></div>
        <div class="app" style="background:yellow;"></div>
        <div class="app" style="background:black;"></div>
        <div class="app" style="background:pink;"></div>
        <div class="app" style="background:blue;"></div>
        <div class="app" style="background:orange;"></div>
        <div class="app" style="background:red;"></div>
        <div class="app" style="background:green;"></div>
        <div class="app" style="background:yellow;"></div>
        <div class="app" style="background:black;"></div>
        <div class="app" style="background:pink;"></div>
        <div class="app" style="background:blue;"></div>
        <div class="app" style="background:orange;"></div>
        <div class="app" style="background:red;"></div>
        <div class="app" style="background:green;"></div>
        <div class="app" style="background:yellow;"></div>
        <div class="app" style="background:black;"></div>
        <div class="app" style="background:pink;"></div>
        <div class="app"...

CSS

.frame {
    background: #eee;
    border-radius: 5px;
    height: 500px;
    margin: 50px auto;
    padding-top: 50px;
    position: relative;
    width: 352px;
}

header {
    background: rgba(255, 255, 255, 0.5);
    border-bottom: 1px solid #ddd;
    height: 50px;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 2;
}

header .apps {
    height: auto;
}

.apps {
    height: 500px;
    overflow: auto;
}

.app {
    background: #ccc;
    border-radius: 11px;
    float: left;
    height: 72px;
    margin: 20px;
    width: 72px;
}

.blurred {
    margin-top: 50px;
    -webkit-filter: contrast(30%) brightness(160%) blur(8px);
}

JavaScript

var apps = document.querySelector('.apps');
var appsDuplicate = apps.cloneNode(true);

var appsBlurred = document.createElement('div');
appsBlurred.className = 'blurred';
appsBlurred.appendChild(appsDuplicate);

var header = document.querySelector('header');
header.appendChild(appsBlurred);

apps.addEventListener('scroll', function(event) {
	appsDuplicate.style.marginTop = -(this.scrollTop) + 'px';
});

apps.scrollTop = 0;