From 987fb711bbeb10512d43bfe62d2d74733077658f Mon Sep 17 00:00:00 2001 From: Benjamin Vray Date: Thu, 2 Feb 2023 16:01:05 +0000 Subject: [PATCH] [FIX] website: fix wrapwrap overflow and animations Before this commit, on iPhone 8 (and lower) it was possible to scroll the page to the right when there were animated elements in the page. A "transform: none" property was applied to non-visible animated elements to prevent the page from expanding to the right. However, this property wasn't properly overriding keyframe transforms on iPhone 8 and lower. This has been resolved by adding "overflow-x: hidden" on the wrapwrap in case "transform: none" is not applied correctly. Steps to reproduce the issue: - On iPhone 8 (Safari). - Drop a few snippets into a page. - Add a "Fade In-Right" animation to a column of a snippet. - Scrolls the page so that the animated element is invisible. - Bug => a horizontal scrollbar appears and it is possible to scroll the page to the right. opw-3165651 closes odoo/odoo#114207 X-original-commit: 1354d337eba26f48699d9eb9bc02287383fc10e5 Signed-off-by: Quentin Smetz (qsm) --- .../static/src/js/content/snippets.animation.js | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/addons/website/static/src/js/content/snippets.animation.js b/addons/website/static/src/js/content/snippets.animation.js index 8cc8fc54b55..3db107a0999 100644 --- a/addons/website/static/src/js/content/snippets.animation.js +++ b/addons/website/static/src/js/content/snippets.animation.js @@ -1220,6 +1220,13 @@ registry.WebsiteAnimate = publicWidget.Widget.extend({ // By default, elements are hidden by the css of o_animate. // Render elements and trigger the animation then pause it in state 0. this.$animatedElements = this.$('.o_animate'); + // Fix for "transform: none" not overriding keyframe transforms on + // iPhone 8 and lower. + this.forceOverflowXYHidden = false; + if (this.$animatedElements[0] && window.getComputedStyle(this.$animatedElements[0]).transform !== 'none') { + this._toggleOverflowXYHidden(true); + this.forceOverflowXYHidden = true; + } _.each(this.$animatedElements, el => { if (el.closest('.dropdown')) { el.classList.add('o_animate_in_dropdown'); @@ -1310,6 +1317,9 @@ registry.WebsiteAnimate = publicWidget.Widget.extend({ * @param {Boolean} add */ _toggleOverflowXYHidden(add) { + if (this.forceOverflowXYHidden) { + return; + } if (add) { this.$scrollingElement[0].classList.add('o_wanim_overflow_xy_hidden'); } else if (!this.$scrollingElement.find('.o_animating').length) {