fix: change popover position to fixed to resolve position issues in absolute layouts

[ignatvilesov]

What is it?

• Feature / enhancement
• Bug
• Docs / tests
• Other

Why is it needed?

Popover is positioned incorrectly in absolute scrollable containers like virtual tables.

Before

After

Checklist:

• My code follows the developer guidelines of this project
• I have performed a self-review of my own code
• I have ran pnpm change and documented my changes
• I have add necessary docs (if needed)
• Added new tests to cover the fix / functionality

[changeset-bot]

🦋 Changeset detected

Latest commit: c7f2213

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@qwik-ui/headless	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

CLA Assistant Lite bot All contributors have signed the CLA ✍️ ✅

[ignatvilesov]

I have read the CLA Document and I hereby sign the CLA

[ignatvilesov]

recheck

[ignatvilesov]

@shairez Hey Shai 👋 I hope you're well.

It would nice if you could review this tiny PR whenever you have some free time.

[pkg-pr-new]

Open in StackBlitz

npm i https://pkg.pr.new/qwikifiers/qwik-ui@1114

npm i https://pkg.pr.new/qwikifiers/qwik-ui/@qwik-ui/headless@1114

npm i https://pkg.pr.new/qwikifiers/qwik-ui/@qwik-ui/styled@1114

npm i https://pkg.pr.new/qwikifiers/qwik-ui/@qwik-ui/utils@1114

commit: c7f2213

[shairez]

thanks @ignatvilesov !

@thejackshelton what is your opinion about this change?
as there are a couple of implications of changing this to fixed no?

[thejackshelton]

thanks @ignatvilesov !

@thejackshelton what is your opinion about this change? as there are a couple of implications of changing this to fixed no?

Positioned elements around an anchor should not be fixed. They are purposely absolute, making them fixed would break a lot of existing apps. To see this in practice, you can edit the css locally in the browser on the qwik ui popover docs from absolute to fixed.

That said, position fixed and strategy: "fixed", are likely two different things, where floating ui makes a different computation than normal.

Popover is positioned incorrectly in absolute scrollable containers like virtual tables.

Hey @ignatvilesov! Appreciate the initiative on a PR.

Have you tried making the outside containing block position relative? It looks like your tooltip does not have a relative container, absolute as a result is going to the bottom of the closest containing block (with the viewport being the last containing block, this goes into the layout algorithms of positioning).

Floating UI recommends the absolute strategy as that is the recommended and performant default. I'd be open to exposing an option to having the ability to change strategies and documenting it if there was a clear and common use case for fixed, but if it is just an issue with containing blocks, then that is a behavior of CSS itself.

Hope this helps in figuring out the containing block issue 🙏 . In either case as a last resort you can override the styles in your project, as that is the purpose of the styles in an @layer

[ignatvilesov]

Hey @thejackshelton 👋 Thanks for sharing your thoughts and suggestions.

Based on my research (tried different things, including relative container), absolute positioning works well in more or less modern browsers. However, it does not work in legacy iOS 15.4 (unfortunately, this version is still in use by our customers) and causes different visual artifacts when applying custom exit animation 😞

Since fixed animation is not needed for most of the cases and causes additional computations, I'll follow your suggestion and try to introduce an additional property for changing strategy and position to fixed while keeping defaults to absolute.

Please let me know if you have a different opinion 😉