fix: update position on visual viewport scroll and resize #7279
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 snippet can be used for testing the fix (for example, on iOS simulator): <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Combo box</title>
</head>
<body>
<vaadin-combo-box></vaadin-combo-box>
<div style="height: 350px"></div>
<vaadin-combo-box></vaadin-combo-box>
<div style="height: 500px"></div>
<script type="module">
import '@vaadin/combo-box';
document.querySelectorAll('vaadin-combo-box').forEach((comboBox) => {
comboBox.items = ['Item 1', 'Item 2', 'Item 3'];
});
</script>
</body>
</html> |
|
There is now a question whether we still need to call web-components/packages/overlay/src/vaadin-overlay-position-mixin.js Lines 199 to 200 in 5d30427 I'm leaning toward keeping it since it might also cover template rendering for someone. |
web-padawan
approved these changes
Mar 28, 2024
web-padawan
deleted the
fix/update-overlay-position-on-visual-viewport-resize
branch
vaadin-bot
pushed a commit
that referenced
this pull request
Apr 3, 2024
web-padawan
pushed a commit
that referenced
this pull request
Apr 3, 2024
) Co-authored-by: Sergey Vinogradov <[email protected]>
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.
Description
The PR adds listeners for visual viewport scroll and resize events to update the overlay's position accordingly. Based on my testing, the visual viewport events are triggered in all scenarios in which the corresponding window events are triggered, so I completely replaced the window scroll and resize listeners with the visual viewport ones.
The Visual Viewport API has good support across all browsers supported by Vaadin 24:
Fixes #7214
Type of change