From d130f5861821e9be2d2b82f72553825e93fbb2c5 Mon Sep 17 00:00:00 2001 From: qsm-odoo Date: Thu, 9 Mar 2023 15:18:06 +0000 Subject: [PATCH] [FIX] website_animate: fix wrapwrap overflow and animations (2) This reviews [1] which solved the problem in most cases (hopefully) but not in all cases. Animated elements which overflow the screen on the right made an horizontal scrollbar appear on iPhone <= 8 using Safari, even when they were not animating yet. This was due to Safari ignoring the `transform: none` rule on inactive elements, preferring to consider the animation transform. As a fix, we forced no possible overflow of the page when we saw this safari bug on the first animated element. The problem here... is that this Safari bug does not occur in every situation. For example, if the animated element is inside a column which is marked as hidden in mobile, Safari actually understands the no transform rule. So if the first animated element was in such a situation but another element in the page had the safari bug... the problem was there again. As a fix, we now check all animated elements for the Safari bug, instead of only the first one. That should do the trick. This commit also reviews the comment: the problem is not confined to old iPhones. This was reproduced on the latest iPhone with latest iOS and up-to-date Safari. opw-3204613 opw-3201937 Related to opw-3165651 [1]: https://github.com/odoo/design-themes/commit/d027d9a547ea460ebb53c6ee56ba3b03aac97703 closes odoo/design-themes#636 Signed-off-by: Quentin Smetz (qsm) --- website_animate/static/src/js/o_animate.frontend.js | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/website_animate/static/src/js/o_animate.frontend.js b/website_animate/static/src/js/o_animate.frontend.js index 0d860b536..7b5b0d5ae 100644 --- a/website_animate/static/src/js/o_animate.frontend.js +++ b/website_animate/static/src/js/o_animate.frontend.js @@ -15,13 +15,22 @@ 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. + // some iPhone using Safari. Note that all animated elements are checked + // (not only one) as the bug is not systematic and may depend on some + // other conditions (for example: an animated image in a block which is + // hidden on mobile would not have the issue). + const couldOverflowBecauseOfSafariBug = [...this.items].some(el => { + return window.getComputedStyle(el).transform !== 'none'; + }); self.forceOverflowXHidden = false; - if (self.items[0] && window.getComputedStyle(self.items[0]).transform !== 'none') { + if (couldOverflowBecauseOfSafariBug) { self._toggleOverflowXHidden(true); + // Now prevent any call to _toggleOverflowXHidden to have an effect self.forceOverflowXHidden = true; } + self.items.each(function () { var $el = $(this); if ($el[0].closest('.dropdown')) {