odoo/odoo#159824

Created by fw-bot

label

odoo-dev:saas-17.2-15.0-fix_animation_scrollbar_bg_video-sobo-qdFk-fw

head

e6e0f3564782faf40781ac6f8a894b1ad1612c12

target

saas-17.2

merged

1 month ago by Website, Soukéina Bojabza (sobo)

forward-port of

odoo/odoo#159193

[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.

opw-3487117

Forward-Port-Of: odoo/odoo#159193