💅 significant cross-browser improvement for blur filter

Author: rupl

_posts/demos/0001-05-01-blur-filter.html

@@ -10,21 +10,20 @@
 
 features:
 - cssfilters
+- css3dtransforms
 
 permalink: /blur-filter/
 original: blur-filter.php
 ---
 
 <style type="text/css">
   body {
-    padding: 0;
     position: relative;
     overflow: hidden;
+
     -webkit-transform-style: preserve-3d;
-       -moz-transform-style: preserve-3d;
             transform-style: preserve-3d;
     -webkit-perspective: 600px;
-       -moz-perspective: 600px;
             perspective: 600px;
   }
 
@@ -40,57 +39,46 @@
     color: #f99;
   }
 
-  div.layer {
+  .layer {
     background: #fff;
     color: #000;
-    position: absolute;
     border: 10px solid #333;
     border-radius: 20px;
-
-    /*
-     * Transitioning the blur kicks this to the GPU, the .05s is a flood control
-     * of sorts. Without a delay you're back in the same position as before with
-     * too many paints.
-     *
-     * @see jankfree.org
-     */
-    -webkit-transition: -webkit-filter .05s linear;
-       -moz-transition:    -moz-filter .05s linear;
-            transition:         filter .05s linear;
+    position: absolute;
   }
-  div.layer span {
+  .layer span {
     display: block;
     width: 100px;
     margin: 20px auto 0;
     font-size: 2em;
   }
 
-  div.back {
+  .back.layer {
     width: 400px;
     height: 200px;
     top: 180px;
+    z-index: 1;
+
     -webkit-transform: translateX(300px);
-       -moz-transform: translateX(300px);
             transform: translateX(300px);
-    z-index: 1;
   }
-  div.middle {
+  .middle.layer {
     width: 580px;
     height: 240px;
     top: 280px;
+    z-index: 2;
+
     -webkit-transform: translateX(200px);
-       -moz-transform: translateX(200px);
             transform: translateX(200px);
-    z-index: 2;
   }
-  div.front {
+  .front.layer {
     width: 720px;
     height: 280px;
     top: 420px;
+    z-index: 3;
+
     -webkit-transform: translateX(100px);
-       -moz-transform: translateX(100px);
             transform: translateX(100px);
-    z-index: 3;
   }
 </style>
 <script>
@@ -102,38 +90,35 @@
     var front = 500;
     var YY,
         offset,
-        sizeBack,
-        sizeMiddle,
-        sizeFront;
+        blurBack,
+        blurMiddle,
+        blurFront;
 
     // For mouse users
     $('html').mousemove(function(e){
 
       offset = $('html').offset();
       YY = e.clientY - offset.top;
 
-      sizeBack   = Math.abs(back-YY)/40;
-      sizeMiddle = Math.abs(middle-YY)/40;
-      sizeFront  = Math.abs(front-YY)/40;
+      blurBack   = Math.abs(back-YY)/40;
+      blurMiddle = Math.abs(middle-YY)/40;
+      blurFront  = Math.abs(front-YY)/40;
 
       // apply blur
       $('.back').css({
-        '-webkit-filter': 'blur('+ (sizeBack) +'px)',
-        '-webkit-transform': 'translate3d(300px,'+ -YY/20 +'px,'+ -YY/20 +'px)',
-        '-moz-transform': 'translate3d(300px,'+ -YY/20 +'px,'+ -YY/20 +'px)',
-        'transform': 'translate3d(300px,'+ -YY/20 +'px,'+ -YY/20 +'px)'
+        '-webkit-filter': 'blur('+ blurBack +'px)',
+        'filter': 'blur('+ blurBack +'px)',
+        'transform': 'translate3d(300px,'+ -YY/20 +'px,'+ -YY/10 +'px)'
       });
       $('.middle').css({
-        '-webkit-filter': 'blur('+ (sizeMiddle) +'px)',
-        '-webkit-transform': 'translate3d(200px,'+ -YY/15 +'px,'+ -YY/15 +'px)',
-        '-moz-transform': 'translate3d(200px,'+ -YY/15 +'px,'+ -YY/15 +'px)',
+        '-webkit-filter': 'blur('+ blurMiddle +'px)',
+        'filter': 'blur('+ blurMiddle +'px)',
         'transform': 'translate3d(200px,'+ -YY/15 +'px,'+ -YY/15 +'px)'
       });
       $('.front').css({
-        '-webkit-filter': 'blur('+ (sizeFront) +'px)',
-        '-webkit-transform': 'translate3d(100px,'+ -YY/10 +'px,'+ -YY/10 +'px)',
-        '-moz-transform': 'translate3d(100px,'+ -YY/10 +'px,'+ -YY/10 +'px)',
-        'transform': 'translate3d(100px,'+ -YY/10 +'px,'+ -YY/10 +'px)'
+        '-webkit-filter': 'blur('+ blurFront +'px)',
+        'filter': 'blur('+ blurFront +'px)',
+        'transform': 'translate3d(100px,'+ -YY/10 +'px,'+ -YY/20 +'px)'
       });
     });
   });