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

[FIX] web_responsive: Chrome slow scroll #742

Merged
merged 1 commit into from
Oct 16, 2017
Merged

[FIX] web_responsive: Chrome slow scroll #742

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
1 change: 1 addition & 0 deletions web_responsive/README.rst
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,7 @@ this module.
* Adding ``oe_main_menu_navbar`` ID to the top navigation bar triggers some
great styles, but also `JavaScript that causes issues on mobile
<https://github.com/OCA/web/pull/446#issuecomment-254827880>`_
* Remove Chrome slow scrolling patch when iScroll is updated


Bug Tracker
Expand Down
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 @@ -108,7 +108,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