Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[11.0][FIX] web_responsive: Chrome Slow Scrolling #758

Merged
merged 1 commit into from
Oct 17, 2017
Merged

[11.0][FIX] web_responsive: Chrome Slow Scrolling #758

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
87 changes: 68 additions & 19 deletions web_responsive/static/lib/js/iscroll-probe.5.2.0.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 ||
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -380,7 +414,7 @@ function IScroll (el, options) {
}

IScroll.prototype = {
version: '5.2.0',
version: '5.2.0-snapshot',

_init: function () {
this._initEvents();
Expand Down Expand Up @@ -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;
Expand All @@ -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');
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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 = [];

Expand Down Expand Up @@ -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++;
}
Expand All @@ -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
};
Expand Down Expand Up @@ -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');
}
Expand Down Expand Up @@ -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);
}
},
Expand Down Expand Up @@ -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;
Expand Down
3 changes: 3 additions & 0 deletions web_responsive/static/src/js/web_responsive.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,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;
Expand Down