From 5f1c9490034af399dd009b0983329fe0d382b19b Mon Sep 17 00:00:00 2001 From: Dave Lasley Date: Sat, 7 Oct 2017 08:21:39 -0700 Subject: [PATCH] [FIX] web_responsive: Chrome Slow Scrolling * Update to iScoll bleeding edge to fix #741 --- .../static/lib/js/iscroll-probe.5.2.0.js | 87 +++++++++++++++---- .../static/src/js/web_responsive.js | 3 + 2 files changed, 71 insertions(+), 19 deletions(-) diff --git a/web_responsive/static/lib/js/iscroll-probe.5.2.0.js b/web_responsive/static/lib/js/iscroll-probe.5.2.0.js index 0a81f8de..8283a36f 100755 --- a/web_responsive/static/lib/js/iscroll-probe.5.2.0.js +++ b/web_responsive/static/lib/js/iscroll-probe.5.2.0.js @@ -1,4 +1,4 @@ -/*! iScroll v5.2.0 ~ (c) 2008-2016 Matteo Spinelli ~ http://cubiq.org/license */ +/*! iScroll v5.2.0-snapshot ~ (c) 2008-2017 Matteo Spinelli ~ http://cubiq.org/license */ (function (window, document, Math) { var rAF = window.requestAnimationFrame || window.webkitRequestAnimationFrame || @@ -124,7 +124,8 @@ var utils = (function () { transitionTimingFunction: _prefixStyle('transitionTimingFunction'), transitionDuration: _prefixStyle('transitionDuration'), transitionDelay: _prefixStyle('transitionDelay'), - transformOrigin: _prefixStyle('transformOrigin') + transformOrigin: _prefixStyle('transformOrigin'), + touchAction: _prefixStyle('touchAction') }); me.hasClass = function (e, c) { @@ -278,6 +279,39 @@ var utils = (function () { } }; + me.getTouchAction = function(eventPassthrough, addPinch) { + var touchAction = 'none'; + if ( eventPassthrough === 'vertical' ) { + touchAction = 'pan-y'; + } else if (eventPassthrough === 'horizontal' ) { + touchAction = 'pan-x'; + } + if (addPinch && touchAction != 'none') { + // add pinch-zoom support if the browser supports it, but if not (eg. Chrome <55) do nothing + touchAction += ' pinch-zoom'; + } + return touchAction; + }; + + me.getRect = function(el) { + if (el instanceof SVGElement) { + var rect = el.getBoundingClientRect(); + return { + top : rect.top, + left : rect.left, + width : rect.width, + height : rect.height + }; + } else { + return { + top : el.offsetTop, + left : el.offsetLeft, + width : el.offsetWidth, + height : el.offsetHeight + }; + } + }; + return me; })(); function IScroll (el, options) { @@ -380,7 +414,7 @@ function IScroll (el, options) { } IScroll.prototype = { - version: '5.2.0', + version: '5.2.0-snapshot', _init: function () { this._initEvents(); @@ -726,15 +760,16 @@ IScroll.prototype = { }, refresh: function () { - var rf = this.wrapper.offsetHeight; // Force reflow + utils.getRect(this.wrapper); // Force reflow this.wrapperWidth = this.wrapper.clientWidth; this.wrapperHeight = this.wrapper.clientHeight; + var rect = utils.getRect(this.scroller); /* REPLACE START: refresh */ - this.scrollerWidth = this.scroller.offsetWidth; - this.scrollerHeight = this.scroller.offsetHeight; + this.scrollerWidth = rect.width; + this.scrollerHeight = rect.height; this.maxScrollX = this.wrapperWidth - this.scrollerWidth; this.maxScrollY = this.wrapperHeight - this.scrollerHeight; @@ -758,6 +793,16 @@ IScroll.prototype = { this.directionX = 0; this.directionY = 0; + if(utils.hasPointer && !this.options.disablePointer) { + // The wrapper should have `touchAction` property for using pointerEvent. + this.wrapper.style[utils.style.touchAction] = utils.getTouchAction(this.options.eventPassthrough, true); + + // case. not support 'pinch-zoom' + // https://github.com/cubiq/iscroll/issues/1118#issuecomment-270057583 + if (!this.wrapper.style[utils.style.touchAction]) { + this.wrapper.style[utils.style.touchAction] = utils.getTouchAction(this.options.eventPassthrough, false); + } + } this.wrapperOffset = utils.offset(this.wrapper); this._execEvent('refresh'); @@ -842,11 +887,13 @@ IScroll.prototype = { pos.top -= this.wrapperOffset.top; // if offsetX/Y are true we center the element to the screen + var elRect = utils.getRect(el); + var wrapperRect = utils.getRect(this.wrapper); if ( offsetX === true ) { - offsetX = Math.round(el.offsetWidth / 2 - this.wrapper.offsetWidth / 2); + offsetX = Math.round(elRect.width / 2 - wrapperRect.width / 2); } if ( offsetY === true ) { - offsetY = Math.round(el.offsetHeight / 2 - this.wrapper.offsetHeight / 2); + offsetY = Math.round(elRect.height / 2 - wrapperRect.height / 2); } pos.left -= offsetX || 0; @@ -1227,7 +1274,8 @@ IScroll.prototype = { x = 0, y, stepX = this.options.snapStepX || this.wrapperWidth, stepY = this.options.snapStepY || this.wrapperHeight, - el; + el, + rect; this.pages = []; @@ -1267,7 +1315,8 @@ IScroll.prototype = { n = -1; for ( ; i < l; i++ ) { - if ( i === 0 || el[i].offsetLeft <= el[i-1].offsetLeft ) { + rect = utils.getRect(el[i]); + if ( i === 0 || rect.left <= utils.getRect(el[i-1]).left ) { m = 0; n++; } @@ -1276,16 +1325,16 @@ IScroll.prototype = { this.pages[m] = []; } - x = Math.max(-el[i].offsetLeft, this.maxScrollX); - y = Math.max(-el[i].offsetTop, this.maxScrollY); - cx = x - Math.round(el[i].offsetWidth / 2); - cy = y - Math.round(el[i].offsetHeight / 2); + x = Math.max(-rect.left, this.maxScrollX); + y = Math.max(-rect.top, this.maxScrollY); + cx = x - Math.round(rect.width / 2); + cy = y - Math.round(rect.height / 2); this.pages[m][n] = { x: x, y: y, - width: el[i].offsetWidth, - height: el[i].offsetHeight, + width: rect.width, + height: rect.height, cx: cx, cy: cy }; @@ -1598,7 +1647,7 @@ IScroll.prototype = { if ( now >= destTime ) { that.isAnimating = false; that._translate(destX, destY); - + if ( !that.resetPosition(that.options.bounceTime) ) { that._execEvent('scrollEnd'); } @@ -1822,7 +1871,7 @@ Indicator.prototype = { utils.removeEvent(window, 'mouseup', this); } - if ( this.options.defaultScrollbars ) { + if ( this.options.defaultScrollbars && this.wrapper.parentNode ) { this.wrapper.parentNode.removeChild(this.wrapper); } }, @@ -1989,7 +2038,7 @@ Indicator.prototype = { } } - var r = this.wrapper.offsetHeight; // force refresh + utils.getRect(this.wrapper); // force refresh if ( this.options.listenX ) { this.wrapperWidth = this.wrapper.clientWidth; diff --git a/web_responsive/static/src/js/web_responsive.js b/web_responsive/static/src/js/web_responsive.js index 84817b36..709669d2 100755 --- a/web_responsive/static/src/js/web_responsive.js +++ b/web_responsive/static/src/js/web_responsive.js @@ -114,7 +114,10 @@ odoo.define('web_responsive', function(require) { 'transform', 'matrix(1, 0, 0, 1, 0, ' + transform + ')' ); }; + // Scroll probe aggressiveness level + // 2 == always executes the scroll event except during momentum and bounce. this.iScroll.options.probeType = 2; + // Set options because this.iScroll.on('scroll', $.proxy(onIScroll, this)); }); this.initialized = true;