Keep floating element visible when its anchor is hidden (Firefox)

[liuliu-dev]

Browser

"Firefox"

Description

When a positioned/floating element is anchored to another element, Firefox hides the floating element when its anchor is completely hidden (default position-visibility: anchors-visible). Chrome still shows the floating element. We want the floating element to remain visible even when its anchor is hidden (for example by using position-visibility: always).

Steps to reproduce

1. Use the primer_react_css_anchor_positioning example that positions a floating element relative to an anchor.
2. In Firefox, scroll or otherwise hide the anchor so it is completely off-screen or covered.
3. Observe that the floating element is strongly hidden in Firefox, while the same scenario in Chrome still shows the floating element.
4. Toggling position-visibility to always in Firefox makes the floating element visible again.

Floating element hidden in Firefox when its anchor is out of view

Observed discrepancy between Firefox and Chrome for anchored positioned elements.

Version

unspecified (observed in recent Firefox stable and Nightly)

View original Slack conversation

[liuliu-dev]

cc @TylerJDev