Tooltip doesn't position self properly if div has a drop shadow

[Zavien1]

Bug report

Current Behavior

Adding a drop shadow to a parent div makes tooltip position itself incorrectly

Expected behavior

Dropshadow should not affect tool tip position

Suggested solution

No clue

Your environment

React + Tailwind

Software	Name(s)	Version
Radix Package(s)
React	n/a
Browser
Assistive tech
Node	n/a
npm/yarn
Operating System

[joaom00]

Do you have a reproducible example in a sandbox?

[atomiks]

Radix is using v0 of Floating UI and is pulling in a version of @floating-ui/dom from June 2022, while there have been several fixes since v1 got released in July.

primitives/packages/react/popper/package.json

Line 20 in 7201816

"@floating-ui/react-dom": "0.7.2",

There aren't any breaking changes between the v0 version used and the latest version, so they can upgrade to @floating-ui/react-dom^1.0.0 with no effort. cc: @benoitgrelard

If you override @floating-ui/react-dom + dom and core to the latest versions manually in your project, is the issue fixed? What browser? This should be the relevant line:

https://github.com/floating-ui/floating-ui/blob/02c127ad9d10800e0ef29e5df9bb458612e737bf/packages/dom/src/utils/is.ts#L60

Although, that's only if the tooltip is rendered inside the div with the filter (Radix portals them to the body right?), and it kind of looks like it's box-shadow, not filter: drop-shadow(...)?

[benoitgrelard]

Yes, I was going to ask too: @Zavien1 are you using the Tooltip.Portal part?

[dcyoung]

Encountering this issue as well, any resolution?

[benoitgrelard]

Hey @atomiks,

This is definitely when using filter: drop-shadow() as opposed to box-shadow, you can see in the 2nd screenshot, there's a bit of shadow on the second popover, plus box-shadow wouldn't create a new containing block.

With that said, the solution is obviously to use Tooltip.Portal as you probably wouldn't want that same shadow on the tooltip content anyway.

That being said, relating to the bug, I have checked all of this locally and here are my findings:

• Regardless of which version of @floating-ui/react-dom I use, the issue is still present. I have tried:
  • current: 0.7.3
  • 1.3.0
  • 2.0.0
• The issue is only present with fixed strategy (which we use). absolute strategy is fine even in old 0.7.3.

I have reproduced the scenario in this simple sandbox using the basics of @floating-ui/dom as I believe it's a low-level issue anyway in the core positioning logic:

https://codesandbox.io/s/floating-ui-fixed-strategy-bug-f4hey0

Let me know if I should open a bug on your side!

✌️

[benoitgrelard]

@dcyoung make sure you use Tooltip.Portal.

[benoitgrelard]

Upstream fix: floating-ui/floating-ui#2334

[benoitgrelard]

I will close this now as we've updated to latest floating-ui and the fix should trickle down automatically.