[FW][FIX] website: avoid horizontal scrollbar with background video #159824
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
This PR targets saas-17.2 and is part of the forward-port chain. Further PRs will be created up to master. More info at https://github.com/odoo/odoo/wiki/Mergebot#forward-port |
This was referenced Mar 29, 2024
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: 6035874
fw-bot
force-pushed
the
saas-17.2-15.0-fix_animation_scrollbar_bg_video-sobo-qdFk-fw
branch
from
de4e11e
to
e6e0f35
Compare
robodoo
pushed a commit
that referenced
this pull request
Apr 2, 2024
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 #159824 X-original-commit: 6035874 Signed-off-by: Romain Derie (rde) <rde@odoo.com> Signed-off-by: Soukéina Bojabza (sobo) <sobo@odoo.com>
fw-bot
deleted the
saas-17.2-15.0-fix_animation_scrollbar_bg_video-sobo-qdFk-fw
branch
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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
_adjustIframefunction in thebackgroundVideopublic 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
_adjustIframewhen the video has loaded, to make sure its dimensions are recomputed/refreshed, preventing the scrollbar to appear.Steps to reproduce:
=> When the video is loaded, a horizontal scrollbar may appear. If not, refresh until it does.
opw-3487117
Forward-Port-Of: #159193