[FIX] website: fix wrapwrap overflow and animations

Before this commit, on iPhone 8 (and lower) it was possible to scroll
the page to the right when there were animated elements in the page.

A "transform: none" property was applied to non-visible animated
elements to prevent the page from expanding to the right. However, this
property wasn't properly overriding keyframe transforms on iPhone 8 and
lower. This has been resolved by adding "overflow-x: hidden" on the
wrapwrap in case "transform: none" is not applied correctly.

Steps to reproduce the issue:

- On iPhone 8 (Safari).
- Drop a few snippets into a page.
- Add a "Fade In-Right" animation to a column of a snippet.
- Scrolls the page so that the animated element is invisible.
- Bug => a horizontal scrollbar appears and it is possible to scroll the
page to the right.

opw-3165651

closes odoo/odoo#114207

X-original-commit: 1354d337eba26f48699d9eb9bc02287383fc10e5
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>

addons/website/static/src/js/content/snippets.animation.js

@@ -1220,6 +1220,13 @@ registry.WebsiteAnimate = publicWidget.Widget.extend({
         // By default, elements are hidden by the css of o_animate.
         // Render elements and trigger the animation then pause it in state 0.
         this.$animatedElements = this.$('.o_animate');
+        // Fix for "transform: none" not overriding keyframe transforms on
+        // iPhone 8 and lower.
+        this.forceOverflowXYHidden = false;
+        if (this.$animatedElements[0] && window.getComputedStyle(this.$animatedElements[0]).transform !== 'none') {
+            this._toggleOverflowXYHidden(true);
+            this.forceOverflowXYHidden = true;
+        }
         _.each(this.$animatedElements, el => {
             if (el.closest('.dropdown')) {
                 el.classList.add('o_animate_in_dropdown');
@@ -1310,6 +1317,9 @@ registry.WebsiteAnimate = publicWidget.Widget.extend({
      * @param {Boolean} add
      */
     _toggleOverflowXYHidden(add) {
+        if (this.forceOverflowXYHidden) {
+            return;
+        }
         if (add) {
             this.$scrollingElement[0].classList.add('o_wanim_overflow_xy_hidden');
         } else if (!this.$scrollingElement.find('.o_animating').length) {