diff --git a/ionic/util/click-block.ts b/ionic/util/click-block.ts index f1edf01f30..e5bc9dc152 100644 --- a/ionic/util/click-block.ts +++ b/ionic/util/click-block.ts @@ -7,8 +7,7 @@ let isShowing = false; export class ClickBlock { enable() { - cbEle = document.createElement('div'); - cbEle.className = 'click-block'; + cbEle = document.createElement('click-block'); document.body.appendChild(cbEle); cbEle.addEventListener('touchmove', function(ev) { ev.preventDefault(); diff --git a/ionic/util/util.scss b/ionic/util/util.scss index 16aa188e65..2534094725 100755 --- a/ionic/util/util.scss +++ b/ionic/util/util.scss @@ -161,7 +161,8 @@ backdrop { // Fill the screen to block clicks (a better pointer-events: none) // to avoid full-page reflows and paints which can cause flickers -.click-block { +click-block { + display: block; position: absolute; top: 0; right: 0; @@ -169,10 +170,11 @@ backdrop { left: 0; opacity: 0; z-index: $z-index-click-block; - transform: translate3d(-9999px, 0px, 0px);; + transform: translate3d(0px, -100%, 0px); + transform: translate3d(0px, calc(-100% + 1px), 0px); - //background: red; - //opacity: .3; + // background: red; + // opacity: .3; } .click-block-active {