odoo/odoo#159824
Created by fw-bot
Statuses:
- legal/cla: Contributor License Agreement check
- ci/runbot: Odoo Test Suite
- ci/upgrade_enterprise: Test upgrades for enterprise master
- ci/template: Contact runbot team on discord for help.
- ci/style: Optional style check. Ignore it only if strictly necessary.
- ci/security: Required security check. Can only be ignored by security team.
- label
- odoo-dev:saas-17.2-15.0-fix_animation_scrollbar_bg_video-sobo-qdFk-fw
- head
- e6e0f3564782faf40781ac6f8a894b1ad1612c12
- merged
- 1 year ago by Website, Soukéina Bojabza (sobo)
| odoo/odoo | |
|---|---|
| 15.0 | #159193 |
| 16.0 | #159778 |
| saas-16.3 | #159797 |
| saas-16.4 | #159809 |
| 17.0 | #159817 |
| saas-17.1 | #159822 |
| saas-17.2 | #159824 |
| 18.0 | |
| saas-18.1 | |
| saas-18.2 | |
| saas-18.3 | |
| saas-18.4 | |
| master | #159829 |
[FW][FIX] website: avoid horizontal scrollbar with background video
When a background video and an animation coming from the left or the right are on a page at the same time, there sometimes is a horizontal scrollbar that appears for no reason. It can happen at any screen size but more frequently near 1000px and below. This issue seems to happen on Chrome only.
It seems to be a race condition between the calls to the _adjustIframe function in the backgroundVideo public widget. Indeed, this function is called when the video is added in the DOM and each time the screen is resized. When an animation is played, it triggers a resize of the window when it is over, which therefore calls _adjustIframe.
When the animation comes from the right/left of the screen, the animated element is translated from outside the page; the page width is therefore bigger but its overflow is prevented. When the video is loaded, the loading placeholder is removed. Depending on the time it takes to it to fully load, if the animation ends before it, the iframe is adjusted before the placeholder removal, leaving the iframe wrongly adjusted when it is finally removed.
Note that it is hypothetical, as everything refreshes when inspecting the DOM, making the scrollbar disappear. But this proves that no element is really overflowing, so it seems to be a value refreshing issue.
This commit adds a call to _adjustIframe when the video has loaded, to make sure its dimensions are recomputed/refreshed, preventing the scrollbar to appear.
Steps to reproduce:
- Drop a "Text-Image" snippet.
- Set a background video to it.
- Add the "Fade In-Right" animation to the image column.
- Save and then resize down the screen to 1000px or below.
- Refresh.
=> When the video is loaded, a horizontal scrollbar may appear. If not, refresh until it does.
Forward-Port-Of: #159193