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 "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

X-original-commit: 7f1731f
  • Loading branch information
sobo-odoo committed Apr 2, 2024
1 parent 4c8a5b1 commit 6035874
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
Expand Up @@ -898,6 +898,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 6035874

Please sign in to comment.