[popups] Fix flash at origin before positioning completes in Preact

[OliverSpeir]

Went with opacity because visibility hidden affects focus, happy to go another route though of course

Fixes #3958

• I have followed (at least) the PR section of the contributing guide.

[pkg-pr-new]

• base-ui-tanstack-start

• vite-css-base-ui-example

  pnpm add https://pkg.pr.new/mui/base-ui/@base-ui/react@3975
  

  pnpm add https://pkg.pr.new/mui/base-ui/@base-ui/utils@3975
  

commit: a0efd4d

[mui-bot]

Bundle size report

Bundle	Parsed size	Gzip size
@base-ui/react	🔺+166B(+0.04%)	🔺+58B(+0.04%)

Details of bundle changes

---

Check out the code infra dashboard for more information about this PR.

[netlify]

✅ Deploy Preview for base-ui ready!

Name	Link
🔨 Latest commit	a0efd4d
🔍 Latest deploy log	https://app.netlify.com/projects/base-ui/deploys/69854f94debe74000864ab39
😎 Deploy Preview	https://deploy-preview-3975--base-ui.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[greptile-apps]

Greptile Overview

Greptile Summary

Prevents flash at origin by setting opacity: 0 on the positioned element until Floating UI completes its positioning calculations. When isPositioned is false, the element will be hidden with opacity: 0, and once positioning is complete, the opacity style is removed allowing normal visibility and transitions.

Key changes:

• Conditionally adds opacity: 0 to base styles when !isPositioned
• Updates useMemo dependency array to include isPositioned so styles update when positioning completes
• Uses opacity instead of visibility to avoid focus-related issues

The approach is sound and follows the PR author's reasoning about avoiding visibility: hidden due to focus behavior.

Confidence Score: 4/5

• Safe to merge with minor consideration for transition timing
• The fix correctly addresses the flash-at-origin issue by using opacity: 0 before positioning completes. The dependency array is properly updated. However, there's a potential edge case with CSS transitions that should be tested in different scenarios.
• Verify that tooltips with CSS opacity transitions work correctly across different browsers

[greptile-apps]

_{1 file reviewed, 1 comment}

_{Edit Code Review Agent Settings | Greptile}

[greptile-apps]

Check that tooltips with CSS opacity transitions work correctly. When isPositioned changes from false to true, the inline opacity: 0 is removed. Test that this timing works smoothly with entrance transitions to ensure there's no brief flash before CSS animations start.

Prompt To Fix With AI

This is a comment left during a code review.
Path: packages/react/src/utils/useAnchorPositioning.ts
Line: 429:429

Comment:
Check that tooltips with CSS `opacity` transitions work correctly. When `isPositioned` changes from `false` to `true`, the inline `opacity: 0` is removed. Test that this timing works smoothly with entrance transitions to ensure there's no brief flash before CSS animations start.

How can I resolve this? If you propose a fix, please make it concise.

[atomiks]

I actually had a PR open #3963 but hadn't added tests yet. We can keep this one.

Can you change the logic to mutate the object as I've done (for perf)

[OliverSpeir]

I actually had a PR open #3963 but hadn't added tests yet. We can keep this one.

Can you change the logic to mutate the object as I've done (for perf)

ah whoops, thanks for the looking into this I appreciate it

[atomiks]

Thanks for the fix @OliverSpeir