Popovers/tooltips rendering in wrong place when inside MS Teams iframe

[Nikkoro]

Hi, so I have a kind of specific issue - popovers like calendars, multi select lists, also tooltips, render in wrong spots when app is hosted inside Microsoft Teams iframe. I couldn't reproduce that with regular iframe. To get a correct position, it's necessary to trigger a reflow by eg scrolling or zooming in/out. I guess MS Teams calculcates stuff wrong, which floating-ui doesn't like.

How it works?

• Eg clicking a DatePicker inside filter builder, it will appear briefly and disappear, until reflow happens.

I have a "fix":

[data-portal-content][style*="position: fixed"] {
    position: absolute !important;
}

body {
    position: relative;
}

but this does not work for tooltips

What I also noticed?

• Before my "fix", on my monitor with 100% scale, the app worked correctly when zoom of MS Teams was set to 100%.
• On my laptop monitor which has 150%, the app worked correctly when zoom of MS Teams was set to 65%

Prime suspect?

• weird DPR passed through iframe ?

---

This is probably not an issue with library, but I'm looking for a working solution that will allow me to position the popovers and tooltips correctly.

[Nikkoro]

This is caused by issue mentioned in #374