NextERP/design-themes
2
0
Fork 0
mirror of https://github.com/odoo/design-themes.git synced 2025-10-07 01:18:52 +07:00
Code Issues Packages Projects Releases Wiki Activity

[FIX] website_animate: fix wrapwrap overflow and animations (2)

Browse Source 
This reviews [1] which solved the problem in most cases (hopefully) but
not in all cases. Animated elements which overflow the screen on the
right made an horizontal scrollbar appear on iPhone <= 8 using Safari,
even when they were not animating yet.

This was due to Safari ignoring the `transform: none` rule on inactive
elements, preferring to consider the animation transform. As a fix, we
forced no possible overflow of the page when we saw this safari bug on
the first animated element.

The problem here... is that this Safari bug does not occur in every
situation. For example, if the animated element is inside a column which
is marked as hidden in mobile, Safari actually understands the no
transform rule. So if the first animated element was in such a situation
but another element in the page had the safari bug... the problem was
there again.

As a fix, we now check all animated elements for the Safari bug, instead
of only the first one. That should do the trick.

This commit also reviews the comment: the problem is not confined to
old iPhones. This was reproduced on the latest iPhone with latest iOS
and up-to-date Safari.

opw-3204613
opw-3201937
Related to opw-3165651

[1]: https://github.com/odoo/design-themes/commit/d027d9a547ea460ebb53c6ee56ba3b03aac97703

closes odoo/design-themes#636

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
This commit is contained in:
qsm-odoo
2023-03-09 15:18:06 +00:00
parent d027d9a547
commit d130f58618
1 changed files with 11 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website_animate/static/src/js/o_animate.frontend.js
+11 -2
View File
@@ -15,13 +15,22 @@ 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.
// some iPhone using Safari. Note that all animated elements are checked
// (not only one) as the bug is not systematic and may depend on some
// other conditions (for example: an animated image in a block which is
// hidden on mobile would not have the issue).
const couldOverflowBecauseOfSafariBug = [...this.items].some(el => {
return window.getComputedStyle(el).transform !== 'none';
});
self.forceOverflowXHidden = false;
if (self.items[0] && window.getComputedStyle(self.items[0]).transform !== 'none') {
if (couldOverflowBecauseOfSafariBug) {
self._toggleOverflowXHidden(true);
// Now prevent any call to _toggleOverflowXHidden to have an effect
self.forceOverflowXHidden = true;
}
self.items.each(function () {
var $el = $(this);
if ($el[0].closest('.dropdown')) {