perf(ot-dropdown): eliminate layout thrashing in popover positioning

[akilvishnum]

Issue: #124

Declarative CSS APIs are used to replace layout thrashing code and reduce JS footprint.

[knadh]

This completely breaks dropdowns on Firefox, unfortunately. The JS positioning code is there a temporary hack to make it work on all browsers until popover anchor positioning support is widely available.

[akilvishnum]

Agreed.
We should wrap this code in requestAnimationFrame and use transform atleast.

Should I proceed with that?

[akilvishnum]

#124

[knadh]

Yep, we can try that. Please update the PR.

[akilvishnum]

Hi @knadh

I have updated the PR with the following changes.

• Wrapped the positioning logic in requestAnimationFrame and migrated from top/left to transform.
• Removed transform from the CSS source to prevent property conflicts, as the positioning is now handled dynamically via JavaScript.

[akilvishnum]

@knadh
Did you got any chance to review this PR?
If it needs any changes, please let me know.

[knadh]

I tried this out, and strangely, the CSS version (this PR) shows repositioning jitter and artifacts when you scroll as opposed to JS positioning (prod). This is Firefox on Fedora.

[akilvishnum]

Hi @knadh

Currently this PR is relying on JS for positioning. I have removed the css code for positioning, since it didn’t have support on all browsers.

[knadh]

@akilvishnum, sorry, I'm confused now. What precisely does the PR change then? Prod is already using JS for positioning and trying out this PR, which seems to have minor changes, I can see the jitter on scroll.

[akilvishnum]

This PR wraps positioning logic inside requestAnimationFrame which updates the position only before the next paint and used transform instead of top and left which removes layout thrashing.