pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[FIX] website: 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/odoo/commit/c1447835786e04f342342540c09e46d1226d5fc0

closes odoo/odoo#114999

X-original-commit: 8fe2d91e05e85ae2e50f1066214d0af5796e5296
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
This commit is contained in:
qsm-odoo
2023-03-11 12:44:53 +01:00
parent 113d3d5b19
commit ac2727d0e0
1 changed files with 13 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/website/static/src/js/content/snippets.animation.js
+13 -4
View File
@@ -1230,16 +1230,25 @@ registry.WebsiteAnimate = publicWidget.Widget.extend({
start() {
this.lastScroll = 0;
this.$scrollingElement = $().getScrollingElement();
// 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.
// 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.$animatedElements].some(el => {
return window.getComputedStyle(el).transform !== 'none';
});
this.forceOverflowXYHidden = false;
if (this.$animatedElements[0] && window.getComputedStyle(this.$animatedElements[0]).transform !== 'none') {
if (couldOverflowBecauseOfSafariBug) {
this._toggleOverflowXYHidden(true);
// Now prevent any call to _toggleOverflowXYHidden to have an effect
this.forceOverflowXYHidden = true;
}
// By default, elements are hidden by the css of o_animate.
// Render elements and trigger the animation then pause it in state 0.
_.each(this.$animatedElements, el => {
if (el.closest('.dropdown')) {
el.classList.add('o_animate_in_dropdown');