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

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 {