[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 "On Appearance" > "Fade" > "From 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

closes odoo/odoo#159817

X-original-commit: 6035874e61d2bb1cecc339c4006cdcb6b4084b5c
Signed-off-by: Romain Derie (rde) <rde@odoo.com>
Signed-off-by: Soukéina Bojabza (sobo) <sobo@odoo.com>
This commit is contained in:
Soukéina Bojabza
2024-04-02 12:09:32 +00:00
parent 8228c45174
commit 5b55bb9df2
@@ -916,6 +916,10 @@ registry.backgroundVideo = publicWidget.Widget.extend(MobileYoutubeAutoplayMixin
this.$iframe = this.$bgVideoContainer.find('.o_bg_video_iframe');
this.$iframe.one('load', () => {
this.$bgVideoContainer.find('.o_bg_video_loading').remove();
// When there is a "slide in (left or right) animation" element, we
// need to adjust the iframe size once it has been loaded, otherwise
// an horizontal scrollbar may appear.
this._adjustIframe();
});
this.$bgVideoContainer.prependTo(this.$el);
$oldContainer.remove();