fix(web-components): make anchor position targets fixed positioned

[marchbox]

Previous Behavior

All anchor position target elements in different components have absolute position, this causes issues when the anchor element is inside a fixed positioned element, e.g. a <dialog>, as if the page scrolls, the target will scroll with the page while the anchor stay fixed due to its fixed positioned container.

New Behavior

All target elements are fixed positioned.

Related Issue(s)

• Fixes [Bug]: Dropdown position is wrong when it is being used in dialogs in Firefox #36034

[github-actions]

📊 Bundle size report

✅ No changes found

[github-actions]

Pull request demo site: URL

[MarvinKlein1508]

@marchbox there is still an issue with the dropdown on mobile. It's impossible to select the fifth option here.

[marchbox]

@marchbox there is still an issue with the dropdown on mobile. It's impossible to select the fifth option here.

@MarvinKlein1508 Nice catch. I’d expect the fallback position to kick in here, I’ll investigate. Thanks!

[marchbox]

@marchbox there is still an issue with the dropdown on mobile. It's impossible to select the fifth option here.

@MarvinKlein1508 Nice catch. I’d expect the fallback position to kick in here, I’ll investigate. Thanks!

Update: this seems to be a Safari only bug, as the fallback works in Chrome and Firefox. Will see how to mitigate it.

[davatron5000]

Good with the change to fixed but will re-review when we feel like we fixed the Mobile Safari bug.

[marchbox]

Update: the Safari bug is related to using position-area, changing to inset-* fixes it.