[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) <qsm@odoo.com>

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;
     }