odoo/odoo#159824

Created by fw-bot
Merged at a8c4f2917eb177288c0d74976c9da6ac5974d785

Statuses:

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.

opw-3487117

Forward-Port-Of: #159193