diff --git a/js/angular/service/clickBlock.js b/js/angular/service/clickBlock.js new file mode 100644 index 0000000000..86d43b0274 --- /dev/null +++ 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 index 9570522768..3853f498e8 100644 --- 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 index be08fbb8b5..aa01c50316 100644 --- 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 index 361dea9297..84e15b41a0 100644 --- 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-item-options: 1 !default; -$z-index-item-radio: 3 !default; -$z-index-item-reordering: 9 !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-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-reorder: 3 !default; +$z-index-item-toggle: 3 !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 index 8ffcd4d461..894d98f215 100644 --- 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', {