fix: set relative positioning explicitly on scroll containers

[bwajtr]

Description

This PR fixes the showing of the horizontal scrollbar in ComboBoxes (and other components) in Firefox (version greater or equal 105) when the component is put into a more complex web component structure. For more details on how to reliably reproduce the issue and more details please see this comment.

Just a short recap of the root cause:

The root cause of the issue is the fact that during the ComboBox creation, when we are creating the Virtualizer for it, at a certain point in code, we call getComputedStyle() on several elements of combobox, expecting to see some values and acting on it. However, Firefox in this situation returns empty styles object where every style property is an empty string instead of some default value. This is unexpected by the code and causes the issue. Other browsers do not behave like that.

We were discussing the possiblity to fix the issue directly in the Javascript code in here:

web-components/packages/component-base/src/virtualizer-iron-list-adapter.js

Lines 48 to 50 in 1cf96ee

	if (getComputedStyle(this.scrollContainer).position === 'static') {
	this.scrollContainer.style.position = 'relative';
	}

Where we could check if getComputedStyle() returned an empty value. However, after some discussions, we decided to fix the issue by explicitly setting the position: relative in CSS for each of the affected components, as it is more understandable fix.

Fixes #5590

Type of change

• Bugfix
• Feature

Checklist

• I have read the contribution guide: https://vaadin.com/docs/latest/contributing/overview
• I have added a description following the guideline.
• The issue is created in the corresponding repository and I have referenced it.
• I have added tests to ensure my change is effective and works as intended.
• New and existing tests are passing locally with my change.
• I have performed self-review and corrected misspellings.

[web-padawan]

However, Firefox in this situation returns empty styles object where every style property is an empty string instead of some default value.

Thanks for a detailed clarification. I recall seeing something like this earlier during debugging.

[sonarcloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.0% Duplication

[vaadin-bot]

Hi @bwajtr , this commit cannot be picked to 23.3 by this bot, can you take a look and pick it manually?
Error Message: Error: Command failed: git cherry-pick 57a8caf
error: could not apply 57a8caf... fix: explicitly set relative positioning on scroll containers (#5714)
hint: After resolving the conflicts, mark them with
hint: "git add/rm ", then run
hint: "git cherry-pick --continue".
hint: You can instead skip this commit with "git cherry-pick --skip".
hint: To abort and get back to the state before "git cherry-pick",
hint: run "git cherry-pick --abort".

[vaadin-bot]

This ticket/PR has been released with Vaadin 24.1.0.alpha2 and is also targeting the upcoming stable 24.1.0 version.