From da21189bbb3a2256171206380b7b09b2dfd7923d Mon Sep 17 00:00:00 2001 From: Benjamin Vray Date: Tue, 18 Apr 2023 08:06:38 +0000 Subject: [PATCH] [FIX] website_animate: fix animations on rtl pages Steps to reproduce the issue: - Open a website page in edit mode. - Drag and drop several snippets onto the page. - Add a 'Fade In Right' animation to an element on the page. - Exit edit mode. - Change the website language to Arabic to display the scrollbar on the left. - Test the animation. - Bug: the scrolling (using the mouse wheel) becomes stuck or very slow during the animation. The issue only occurs with Chrome or Edge browsers and seems to be a browser display issue. It happens only when animated elements overflow to the left. This commit fixes the problem by adding an 'overflow: hidden' to the main element during RTL page animations. This is not the best solution because the animated elements become non-visible outside the main element, creating a difference, for example, with the 'Framed' page layout. opw-3260399 closes odoo/design-themes#648 Signed-off-by: Quentin Smetz (qsm) --- .../static/src/scss/o_animate_frontend.scss | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/website_animate/static/src/scss/o_animate_frontend.scss b/website_animate/static/src/scss/o_animate_frontend.scss index 34e9cbcef..3520ea222 100644 --- a/website_animate/static/src/scss/o_animate_frontend.scss +++ b/website_animate/static/src/scss/o_animate_frontend.scss @@ -20,6 +20,17 @@ } .o_wanim_overflow_x_hidden { overflow-x: hidden !important; + + &.o_rtl { + // Fix for Chrome and Edge bug: resolves slow/stuck scrolling during + // left-overflowing animations on RTL web pages. Note: using overflow on + // the main element hides animated elements outside of it (e.g. "Framed" + // page layout). This may not be the ideal solution but could be the + // best workaround for now. + > main { + overflow-x: hidden; + } + } } @-moz-keyframes o_animate_timeline_duration {