Skip to content

Commit

Permalink
[FIX] website: avoid horizontal scrollbar with background video
Browse files Browse the repository at this point in the history
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

closes #159193

Signed-off-by: Romain Derie (rde) <rde@odoo.com>
  • Loading branch information
sobo-odoo authored and rdeodoo committed Mar 28, 2024
1 parent 3884887 commit 7f1731f
Showing 1 changed file with 4 additions and 0 deletions.
4 changes: 4 additions & 0 deletions addons/website/static/src/js/content/snippets.animation.js
Original file line number Diff line number Diff line change
Expand Up @@ -896,6 +896,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.$target);
$oldContainer.remove();
Expand Down

0 comments on commit 7f1731f

Please sign in to comment.