Ich versuche, mit HTML5, CSS3 und JavaScript einen gefrosteten iOS 7-Look zu erstellen, der auf Webkit-Browsern funktioniert.

Technisch gesehen mit folgendem HTML:

<style>
  #partial-overlay {
    width: 100%;
    height: 20px;
    background: rgba(255, 255, 255, .2); /* TODO frost */
    position: fixed;
    top: 0;
    left: 0;
  }
</style>
<div id="main-view">
  <div style="width: 50px; height: 50px; background: #f00"></div>
  To my left is a red box<br>
  Now there is just text<br>
  Text that goes on for a few pixels <br>
  or even more
</div>
<div id="partial-overlay">
  Here is some content
</div>

Ich würde gerne so etwas wie ein-webkit-filter: blur(5px) zu den ersten 20px horizontal von#main-view.

Wenn das CSS geändert wurde#partial-overlay { width: 20px; height: 100%; ...} dann müsste ich das anwenden-webkit-filter: blur(5px) zu den ersten 20px vertikal.

Die naheliegende Lösung besteht darin, Javascript zu verwenden, um einen Klon von zu erstellen#main-view, einstellenoverflow: hidden und dann ändern Sie die Breite / Höhe nach Bedarf, aber das scheint mir schwer zu verallgemeinern, um komplexere Seiten / CSS-Strukturen.

Gibt es einen besseren Weg, dies mit minimaler Leistungseinbuße und maximaler Generalisierbarkeit zu erreichen?

BEARBEITEN: Hier ist ein Beispiel dafür, was ich erreichen möchte: