[FIX] website_animate: 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 one of the snippets.
- 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/design-themes#632

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>

website_animate/static/src/js/o_animate.frontend.js

@@ -15,6 +15,13 @@ var WebsiteAnimate = {
         var self   = this;
         self.$scrollingElement = $().getScrollingElement();
         self.items = $("#wrapwrap .o_animate");
+        // Fix for "transform: none" not overriding keyframe transforms on
+        // iPhone 8 and lower.
+        self.forceOverflowXHidden = false;
+        if (self.items[0] && window.getComputedStyle(self.items[0]).transform !== 'none') {
+            self._toggleOverflowXHidden(true);
+            self.forceOverflowXHidden = true;
+        }
         self.items.each(function () {
             var $el = $(this);
             if ($el[0].closest('.dropdown')) {
@@ -112,6 +119,9 @@ var WebsiteAnimate = {
 
     // show/hide the horizontal scrollbar (on the #wrapwrap)
     _toggleOverflowXHidden: function (add) {
+        if (this.forceOverflowXHidden) {
+            return;
+        }
         if (add) {
             this.$scrollingElement[0].classList.add('o_wanim_overflow_x_hidden');
         } else if (!this.$scrollingElement.find('.o_animating').length) {