[tooltip] Flash at origin before positioning completes in Preact #3958
Description
Floating elements (Tooltip, Popover, etc.) briefly flash at position 0,0 before moving to their correct
position. This is visible as a flicker in the top-left corner when the element first appears.
Reproduction
https://github.com/OliverSpeir/preact-tooltip-repro
Root cause
The floatingStyles in useAnchorPositioning returns position values immediately, before isPositioned
becomes true. In preact useLayoutEffect timing differs slightly from React,
this causes a visible frame where the element renders at 0,0.
Proposed fix
Use the existing isPositioned flag to hide the element until positioning completes:
- const floatingStyles = React.useMemo(() => adaptiveOrigin ? {
- position: resolvedPosition,
- [sideX]: x,
- [sideY]: y
- } : {
- position: resolvedPosition,
- ...originalFloatingStyles
- }, [adaptiveOrigin, resolvedPosition, sideX, x, sideY, y, originalFloatingStyles]);
+ const floatingStyles = React.useMemo(() => {
+ const base = adaptiveOrigin
+ ? { position: resolvedPosition, [sideX]: x, [sideY]: y }
+ : { position: resolvedPosition, ...originalFloatingStyles };
+ return !isPositioned ? { ...base, opacity: 0 } : base;
+ }, [adaptiveOrigin, resolvedPosition, sideX, x, sideY, y, originalFloatingStyles, isPositioned]);