From 2c5096823b7729a7b73faa3ee87242ebf5dbdcc5 Mon Sep 17 00:00:00 2001 From: Benjamin Vray Date: Tue, 18 Apr 2023 09:02:57 +0000 Subject: [PATCH] [FIX] website: 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/odoo#119766 X-original-commit: 69184ea84c78de33d47f1e952530cceb568c937b Signed-off-by: Quentin Smetz (qsm) --- addons/website/static/src/scss/website.scss | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/addons/website/static/src/scss/website.scss b/addons/website/static/src/scss/website.scss index b6d01fd9e98..b6b4af7152e 100644 --- a/addons/website/static/src/scss/website.scss +++ b/addons/website/static/src/scss/website.scss @@ -1620,6 +1620,17 @@ input[value*="data-oe-translation-initial-sha"] { } .o_wanim_overflow_xy_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; + } + } .o_footer_slideout { overflow-y: hidden !important; }