Skip to content

Commit e9f0fcf

Browse files
adamdbradleyadamdbradley
committed
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.
1 parent 2c3f1c9 commit e9f0fcf

File tree

5 files changed

+61
-23
lines changed

5 files changed

+61
-23
lines changed

‎js/angular/service/clickBlock.js‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
IonicModule
2+
.factory('$ionicClickBlock', [
3+
'$document',
4+
'$ionicBody',
5+
'$timeout',
6+
function($document, $ionicBody, $timeout) {
7+
var cb = $document[0].createElement('div');
8+
cb.className = 'click-block';
9+
return {
10+
show: function() {
11+
if(cb.parentElement) {
12+
cb.classList.remove('hide');
13+
} else {
14+
$ionicBody.append(cb);
15+
}
16+
$timeout(function(){
17+
cb.classList.add('hide');
18+
}, 500);
19+
},
20+
hide: function() {
21+
cb.classList.add('hide');
22+
}
23+
};
24+
}]);

‎js/angular/service/viewService.js‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,8 @@ function($rootScope, $state, $location, $document, $animate, $ionicPlatform, $io
9494
'$injector',
9595
'$animate',
9696
'$ionicNavViewConfig',
97-
function($rootScope, $state, $location, $window, $injector, $animate, $ionicNavViewConfig) {
97+
'$ionicClickBlock',
98+
function($rootScope, $state, $location, $window, $injector, $animate, $ionicNavViewConfig, $ionicClickBlock) {
9899

99100
var View = function(){};
100101
View.prototype.initialize = function(data) {
@@ -477,17 +478,17 @@ function($rootScope, $state, $location, $window, $injector, $animate, $ionicNavV
477478
setAnimationClass();
478479

479480
element.addClass('ng-enter');
480-
document.body.classList.add('disable-pointer-events');
481+
$ionicClickBlock.show();
481482

482483
$animate.enter(element, navViewElement, null, function() {
483-
document.body.classList.remove('disable-pointer-events');
484+
$ionicClickBlock.hide();
484485
if (animationClass) {
485486
navViewElement[0].classList.remove(animationClass);
486487
}
487488
});
488489
return;
489490
} else if(!doAnimation) {
490-
document.body.classList.remove('disable-pointer-events');
491+
$ionicClickBlock.hide();
491492
}
492493

493494
// no animation

‎scss/_util.scss‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,18 @@
6060
-ms-content-zooming: none;
6161
}
6262

63+
// Fill the screen to block clicks (a better pointer-events: none) for the body
64+
// to avoid full-page reflows and paints which can cause flickers
65+
.click-block {
66+
position: absolute;
67+
top: 0;
68+
left: 0;
69+
z-index: $z-index-click-block;
70+
width: 100%;
71+
height: 100%;
72+
background: transparent;
73+
}
74+
6375
.no-resize {
6476
resize: none;
6577
}

‎scss/_variables.scss‎

Lines changed: 19 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -671,34 +671,35 @@ $badge-default-text: #AAAAAA !default;
671671
// Z-Indexes
672672
// -------------------------------
673673

674-
$z-index-action-sheet: 11 !default;
675-
$z-index-badge: 1 !default;
676-
$z-index-backdrop: 11 !default;
677-
$z-index-bar: 10 !default;
678674
$z-index-bar-title: 0 !default;
679-
$z-index-bar-button: 1 !default;
680-
$z-index-item: 2 !default;
681-
$z-index-item-reorder: 3 !default;
682-
$z-index-item-checkbox: 3 !default;
683675
$z-index-item-drag: 0 !default;
684676
$z-index-item-edit: 0 !default;
677+
$z-index-menu: 0 !default;
678+
$z-index-badge: 1 !default;
679+
$z-index-bar-button: 1 !default;
685680
$z-index-item-options: 1 !default;
681+
$z-index-pane: 1 !default;
682+
$z-index-slider-pager: 1 !default;
683+
$z-index-view: 1 !default;
684+
$z-index-item: 2 !default;
685+
$z-index-item-checkbox: 3 !default;
686686
$z-index-item-radio: 3 !default;
687-
$z-index-item-reordering: 9 !default;
687+
$z-index-item-reorder: 3 !default;
688688
$z-index-item-toggle: 3 !default;
689-
$z-index-loading: 13 !default;
690-
$z-index-menu: 0 !default;
691-
$z-index-menu-bar-header: 11 !default;
689+
$z-index-tabs: 5 !default;
690+
$z-index-item-reordering: 9 !default;
691+
$z-index-bar: 10 !default;
692692
$z-index-menu-scroll-content: 10 !default;
693693
$z-index-modal: 10 !default;
694-
$z-index-pane: 1 !default;
695-
$z-index-popup: 12 !default;
696694
$z-index-popover: 10 !default;
697-
$z-index-scroll-bar: 9999 !default;
695+
$z-index-action-sheet: 11 !default;
696+
$z-index-backdrop: 11 !default;
697+
$z-index-menu-bar-header: 11 !default;
698698
$z-index-scroll-content-false: 11 !default;
699-
$z-index-slider-pager: 1 !default;
700-
$z-index-tabs: 5 !default;
701-
$z-index-view: 1 !default;
699+
$z-index-popup: 12 !default;
700+
$z-index-loading: 13 !default;
701+
$z-index-scroll-bar: 9999 !default;
702+
$z-index-click-block: 99999 !default;
702703

703704

704705
// Platform

‎test/unit/angular/controller/scrollController.unit.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -323,7 +323,7 @@ describe('$ionicScroll Controller', function() {
323323
}
324324
};
325325
module('ionic', function($provide) {
326-
$provide.value('$document', [ { getElementById: function(){ return ele; } } ]);
326+
$provide.value('$document', [ { getElementById: function(){ return ele; }, createElement: function(tagName){ return document.createElement(tagName); } } ]);
327327
});
328328
inject(function($controller, $rootScope, $location, $timeout) {
329329
var scrollCtrl = $controller('$ionicScroll', {

0 commit comments

Comments
 (0)