refactor(clickBlock): add click-block div to body

Instead of using pointer-events: none to disable unwanted clicks which can cause flickering, we’re now using a click-block div that covers the view during transitions. Similar concept to pointer-events: none applied to the body tag, but in tests its showing to be more effective to not cause any flickers.
valent-ex · Aug 27, 2014 · e9f0fcf · e9f0fcf
1 parent 2c3f1c9
commit e9f0fcf
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 23 deletions.
diff --git a/js/angular/service/clickBlock.js b/js/angular/service/clickBlock.js
@@ -0,0 +1,24 @@
+IonicModule
+.factory('$ionicClickBlock', [
+  '$document',
+  '$ionicBody',
+  '$timeout',
+function($document, $ionicBody, $timeout) {
+  var cb = $document[0].createElement('div');
+  cb.className = 'click-block';
+  return {
+    show: function() {
+      if(cb.parentElement) {
+        cb.classList.remove('hide');
+      } else {
+        $ionicBody.append(cb);
+      }
+      $timeout(function(){
+        cb.classList.add('hide');
+      }, 500);
+    },
+    hide: function() {
+      cb.classList.add('hide');
+    }
+  };
+}]);
diff --git a/js/angular/service/viewService.js b/js/angular/service/viewService.js
@@ -94,7 +94,8 @@ function($rootScope, $state, $location, $document, $animate, $ionicPlatform, $io
   '$injector',
   '$animate',
   '$ionicNavViewConfig',
-function($rootScope, $state, $location, $window, $injector, $animate, $ionicNavViewConfig) {
+  '$ionicClickBlock',
+function($rootScope, $state, $location, $window, $injector, $animate, $ionicNavViewConfig, $ionicClickBlock) {
 
   var View = function(){};
   View.prototype.initialize = function(data) {
@@ -477,17 +478,17 @@ function($rootScope, $state, $location, $window, $injector, $animate, $ionicNavV
               setAnimationClass();
 
               element.addClass('ng-enter');
-              document.body.classList.add('disable-pointer-events');
+              $ionicClickBlock.show();
 
               $animate.enter(element, navViewElement, null, function() {
-                document.body.classList.remove('disable-pointer-events');
+                $ionicClickBlock.hide();
                 if (animationClass) {
                   navViewElement[0].classList.remove(animationClass);
                 }
               });
               return;
             } else if(!doAnimation) {
-              document.body.classList.remove('disable-pointer-events');
+              $ionicClickBlock.hide();
             }
 
             // no animation

diff --git a/scss/_util.scss b/scss/_util.scss
@@ -60,6 +60,18 @@
   -ms-content-zooming: none;
 }
 
+// Fill the screen to block clicks (a better pointer-events: none) for the body
+// to avoid full-page reflows and paints which can cause flickers
+.click-block {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: $z-index-click-block;
+  width: 100%;
+  height: 100%;
+  background: transparent;
+}
+
 .no-resize {
   resize: none;
 }

diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -671,34 +671,35 @@ $badge-default-text:              #AAAAAA !default;
 // Z-Indexes
 // -------------------------------
 
-$z-index-action-sheet:            11 !default;
-$z-index-badge:                   1 !default;
-$z-index-backdrop:                11 !default;
-$z-index-bar:                     10 !default;
 $z-index-bar-title:               0 !default;
-$z-index-bar-button:              1 !default;
-$z-index-item:                    2 !default;
-$z-index-item-reorder:            3 !default;
-$z-index-item-checkbox:           3 !default;
 $z-index-item-drag:               0 !default;
 $z-index-item-edit:               0 !default;
+$z-index-menu:                    0 !default;
+$z-index-badge:                   1 !default;
+$z-index-bar-button:              1 !default;
 $z-index-item-options:            1 !default;
+$z-index-pane:                    1 !default;
+$z-index-slider-pager:            1 !default;
+$z-index-view:                    1 !default;
+$z-index-item:                    2 !default;
+$z-index-item-checkbox:           3 !default;
 $z-index-item-radio:              3 !default;
-$z-index-item-reordering:         9 !default;
+$z-index-item-reorder:            3 !default;
 $z-index-item-toggle:             3 !default;
-$z-index-loading:                 13 !default;
-$z-index-menu:                    0 !default;
-$z-index-menu-bar-header:         11 !default;
+$z-index-tabs:                    5 !default;
+$z-index-item-reordering:         9 !default;
+$z-index-bar:                     10 !default;
 $z-index-menu-scroll-content:     10 !default;
 $z-index-modal:                   10 !default;
-$z-index-pane:                    1 !default;
-$z-index-popup:                   12 !default;
 $z-index-popover:                 10 !default;
-$z-index-scroll-bar:              9999 !default;
+$z-index-action-sheet:            11 !default;
+$z-index-backdrop:                11 !default;
+$z-index-menu-bar-header:         11 !default;
 $z-index-scroll-content-false:    11 !default;
-$z-index-slider-pager:            1 !default;
-$z-index-tabs:                    5 !default;
-$z-index-view:                    1 !default;
+$z-index-popup:                   12 !default;
+$z-index-loading:                 13 !default;
+$z-index-scroll-bar:              9999 !default;
+$z-index-click-block:             99999 !default;
 
 
 // Platform

diff --git a/test/unit/angular/controller/scrollController.unit.js b/test/unit/angular/controller/scrollController.unit.js
@@ -323,7 +323,7 @@ describe('$ionicScroll Controller', function() {
       }
     };
     module('ionic', function($provide) {
-      $provide.value('$document', [ { getElementById: function(){ return ele; } } ]);
+      $provide.value('$document', [ { getElementById: function(){ return ele; }, createElement: function(tagName){ return document.createElement(tagName); } } ]);
     });
     inject(function($controller, $rootScope, $location, $timeout) {
       var scrollCtrl = $controller('$ionicScroll', {