Skip to content

Apple Silicon M1: CLI render has vertical compositor shift after ~12s; Studio preview and Intel render are stable #828

@hardysing13

Description

@hardysing13

Describe the bug

Describe the bug

On Apple Silicon M1, npx hyperframes render produces a vertical alignment/compositor shift in the rendered MP4 after approximately 9–12 seconds, and again at later scene-transition points.

The same composition:

  • previews correctly in HyperFrames Studio
  • renders correctly on an Intel Mac
  • shows vertical shift/glitch only in CLI-rendered MP4 on M1

This appears to be related to headless Chrome / GPU compositor behavior on Apple Silicon rather than the composition code.

Environment

  • HyperFrames: 0.6.4
  • Machine with issue: MacBook Air M1, 8GB unified memory
  • macOS: [add your macOS version]
  • Node.js: [add Node version tested — e.g. v25.9.0 and/or Node 22]
  • Chrome: system Chrome
  • FFmpeg: 8.1
  • Command: npx hyperframes render --output output.mp4

Expected behavior

CLI render should match Studio preview and remain vertically stable across the full composition.

Actual behavior

The rendered MP4 shifts downward around the 9–12 second mark, later corrects, and then shifts again at later timeline points.

In my test composition, visible shifts occurred around:

  • ~9s
  • ~20s
  • ~32s
  • ~49s

What I tried

I rebuilt the composition from scratch with a render-safe structure:

  • fixed 1920x1080 root
  • fixed absolute-positioned stage
  • no CSS animations
  • no CSS transitions
  • no @keyframes
  • no requestAnimationFrame
  • no setTimeout
  • no setInterval
  • no dynamic text mutation
  • no flex/grid for primary layout
  • no scene clip lifecycle for major layers
  • one paused GSAP timeline registered to window.__timelines
  • all visual elements mounted from frame 0
  • opacity-only scene transitions where possible

The issue persisted on M1 but not on Intel.

Workaround

Rendering on Intel Mac works correctly.

Splitting the composition into sub-compositions under ~10 seconds also appears to avoid the issue.

Reproduction

I can provide:

  • minimal index.html
  • broken M1 render
  • correct Intel render
  • npx hyperframes doctor output
  • screenshots showing the vertical shift

Link to reproduction

https://github.com/hardysing13/my-hyperframes-repro

Steps to reproduce

index.html

Image Image

Expected behavior

test-050.mp4

Actual behavior

cat > README.md <<'EOF'

HyperFrames M1 Render Shift Reproduction

This is a minimal reproduction for a HyperFrames CLI render issue on Apple Silicon M1.

Issue

On Apple Silicon M1, npx hyperframes render produces a vertical compositor/layout shift in the rendered MP4 after approximately 9–12 seconds, and again at later timeline points.

The same composition:

  • previews correctly in HyperFrames Studio when Studio is available
  • renders correctly on an Intel Mac
  • shifts vertically only in the CLI-rendered MP4 on M1

Environment with issue

  • Machine: MacBook Air M1, 8GB unified memory
  • HyperFrames: 0.6.4
  • Node.js: v25.9.0 and/or Node 22
  • FFmpeg: 8.1
  • Chrome: system Chrome
  • Command: npx hyperframes render --output output.mp4

Reproduction steps

npm install
npx hyperframes doctor
npx hyperframes render --output output-m1.mp4

### Environment

```shell
Node.js 11.12.1
hyperframes 0.6.6 also reproducible till 0.4.0
ffmpeg version 8.1

Additional context

No response

Metadata

Metadata

Assignees

Labels

bugSomething isn't working

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions