From d027d9a547ea460ebb53c6ee56ba3b03aac97703 Mon Sep 17 00:00:00 2001 From: Benjamin Vray Date: Thu, 2 Feb 2023 15:37:57 +0000 Subject: [PATCH] [FIX] website_animate: 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 one of the snippets. - 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/design-themes#632 Signed-off-by: Quentin Smetz (qsm) --- website_animate/static/src/js/o_animate.frontend.js | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/website_animate/static/src/js/o_animate.frontend.js b/website_animate/static/src/js/o_animate.frontend.js index 9e157f8d1..0d860b536 100644 --- a/website_animate/static/src/js/o_animate.frontend.js +++ b/website_animate/static/src/js/o_animate.frontend.js @@ -15,6 +15,13 @@ var WebsiteAnimate = { var self = this; self.$scrollingElement = $().getScrollingElement(); self.items = $("#wrapwrap .o_animate"); + // Fix for "transform: none" not overriding keyframe transforms on + // iPhone 8 and lower. + self.forceOverflowXHidden = false; + if (self.items[0] && window.getComputedStyle(self.items[0]).transform !== 'none') { + self._toggleOverflowXHidden(true); + self.forceOverflowXHidden = true; + } self.items.each(function () { var $el = $(this); if ($el[0].closest('.dropdown')) { @@ -112,6 +119,9 @@ var WebsiteAnimate = { // show/hide the horizontal scrollbar (on the #wrapwrap) _toggleOverflowXHidden: function (add) { + if (this.forceOverflowXHidden) { + return; + } if (add) { this.$scrollingElement[0].classList.add('o_wanim_overflow_x_hidden'); } else if (!this.$scrollingElement.find('.o_animating').length) {