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
closesodoo/design-themes#648
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
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/d027d9a547ea460ebb53c6ee56ba3b03aac97703closesodoo/design-themes#636
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
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
closesodoo/design-themes#632
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
Backport of [1].
Before this commit, the animations were never launched in a mega menu.
Indeed the animations are launched when the element to be animated
appears in the viewport according to the scroll. But in the case of a
mega menu we just want the animation to start when the mega menu is
opened. For that we don't need all the code that checks the scroll, etc.
The animation starts by itself when the element inside the mega menu is
made visible in CSS.
This commit also removes the "Each time it becomes visible" option for
an element animated in a mega menu because in this case this option does
not make sense.
[1]: https://github.com/odoo/odoo/commit/bae04041a528e1a1fe97387ca5b75943c1d0fe97
opw-2764895
closesodoo/design-themes#561
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
Before this commit, when dropping custom snippet (or saved snippet)
containing an animation in the page, the animated element of the
snippet remained hidden.
task-2664876
closesodoo/design-themes#516
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
Before this commit, the option "each time it becomes visible" did not
work in edit mode.
task-2630112
closesodoo/design-themes#490
X-original-commit: 87233c988b
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
Before this commit, when drag n drop a snippet to move it in a website
page, the snippet was invisible after the drop.
task-2215118
closesodoo/design-themes#468
X-original-commit: d8e547ceab
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
Before this commit, when animated elements with a css translate
overflowed the #wrapwrap (before and during animations), a horizontal
scrollbar was visible on the #wrapwrap until the end of the animation.
After this commit, the horizontal scrollbar is no longer visible at
any time during the animations.
task-2215118
closesodoo/design-themes#270
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
Before this commit, the calculation of the top position of the
animated elements did not take into account the fact that the
scrollable element is no longer the body. And therefore the animations
never started.
task-2215118
closesodoo/design-themes#54
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
The animations "Rotate In-Down-Left" and "Rotate In-Down-Right" were
not done correctly because we were trying to get the position of the
element (by not taking CSS transforms into calculations) via the
matrix of the css transform and it does not work if there is a
transform-origin on the element.
task-2215118
closesodoo/design-themes#50
X-original-commit: ad7389630c
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
The license is missing in most enterprise manifest so
the decision was taken to make it explicit in all cases.
When not defined, a warning will be triggered starting from
14.0 when falling back on the default LGPL-3.
closesodoo/design-themes#43
Related: odoo/enterprise#19850
Related: odoo/odoo#74231
Signed-off-by: Xavier Dollé (xdo) <xdo@odoo.com>
Odoo Translation Bot