Fix SVG zero-duration opacity animations

[mattgperry]

Summary

• render SVG opacity through CSS so WAAPI completion and instant JS updates write to the same channel
• add a Cypress regression based on the issue's foreignObject reproduction
• update SVG WAAPI assertions to reflect opacity's CSS rendering

Fixes #3779

Test plan

• yarn build
• yarn test (all 7 tasks; 96 Framer Motion suites and 809 tests)
• reproduced the stale style.opacity = 0 before the fix in Chromium
• verified fade-out and zero-duration restoration in Chromium with React 18 and React 19
• targeted ESLint (no errors) and Prettier checks
• Cypress CLI: repository-pinned Cypress 4 Electron cannot start on macOS 26 (bad option: --no-sandbox / --smoke-test)
• repository-wide yarn lint: blocked by 52 pre-existing errors in unrelated dev examples/tests

Made with Cursor

[mattgperry]

Follow-up verification correction: the Cypress launch failure was caused by ELECTRON_RUN_AS_NODE in the local Cursor environment, not by macOS/Cypress incompatibility. Running with that variable unset succeeds:

• React 18: waapi-svg-zero-duration.ts — 1 passing
• React 19: waapi-svg-zero-duration.ts — 1 passing

The unchecked Cypress item in the original PR description is therefore superseded by these passing runs.

[greptile-apps]

Greptile Summary

This PR moves non-root SVG opacity rendering from presentation attributes to inline CSS so native animation completion and immediate updates write through the same channel.

• Adds a foreignObject regression fixture and Cypress test for fade-out followed by zero-duration restoration.
• Updates existing SVG WAAPI assertions to inspect inline opacity styles.
• The regression test should additionally prove that it exercises native WAAPI rather than the JavaScript fallback.

Confidence Score: 4/5

The implementation appears safe to merge, with a non-blocking gap in whether the new regression test actually exercises the native WAAPI path.

The production change consistently routes non-root SVG opacity through CSS, but the new test's computed-style assertions can also pass under the JavaScript fallback and therefore do not fully guard the WAAPI-specific regression.

Files Needing Attention: packages/framer-motion/cypress/integration/waapi-svg-zero-duration.ts

Important Files Changed

Filename	Overview
packages/motion-dom/src/render/svg/utils/build-attrs.ts	Moves opacity from SVG attributes to CSS styles consistently with the intended WAAPI rendering channel; no concrete runtime regression was established.
packages/framer-motion/cypress/integration/waapi-svg-zero-duration.ts	Covers the reported visual sequence but does not distinguish native WAAPI execution from the JavaScript fallback.
packages/framer-motion/cypress/integration/waapi-svg.ts	Updates assertions to match the new CSS opacity output while retaining explicit native-animation capability checks.
dev/react/src/tests/waapi-svg-zero-duration.tsx	Adds a focused foreignObject fixture reproducing fade-out and instant opacity restoration.

_{Reviews (1): Last reviewed commit: "Fix #3779: keep SVG opacity rendering in..." | Re-trigger Greptile}

[greptile-apps]

WAAPI path remains unverified

The test checks only the final computed opacity, which the JavaScript fallback also produces. It can therefore pass without exercising the SVG WAAPI completion channel and will not reliably guard the reported native-animation regression.

Context Used: CLAUDE.md (source)

Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!