[Bug] Fix Flip animation glitch on Safari

[Daksh7785]

Investigate Flip Animation Glitch on Safari

Type: Bug
Priority: Medium
Severity: Minor
Difficulty: Beginner

---

Description

Several users have reported that the Flip animation exhibits inconsistent behavior when rendered in Safari on both macOS and iOS. Instead of performing a smooth flip transition, the animation may briefly stutter, flicker, flash, or render with visible frame drops during playback. In some cases, the animated element may momentarily disappear or display rendering artifacts before completing the animation.

As the repository is currently under a core code freeze, contributors must not modify any files inside the core/ or components/ directories. Instead, contributors should create a reproduction demo or documentation inside the submissions/ directory that clearly demonstrates the issue and documents any browser-specific observations.

The goal of this issue is to provide maintainers with a reliable reproduction and investigate whether Safari-specific rendering behavior—such as GPU compositing, hardware acceleration, or 3D transform handling—is responsible for the glitch. Contributors are encouraged to document potential optimizations (for example, translateZ(0), backface-visibility, perspective, or will-change) without modifying the framework source.

---

Current Behavior

• Flip animation occasionally stutters or skips frames in Safari.
• Some animations briefly flash or flicker during execution.
• Elements may disappear momentarily during the flip transition.
• Rendering is inconsistent compared to Chrome, Firefox, and Edge.

---

Expected Behavior

• Flip animations should render smoothly across all supported browsers.
• No flickering, flashing, or frame drops should occur.
• Animation timing and visual behavior should remain consistent regardless of browser.
• Developers should have a documented reproduction to help diagnose the issue.

---

Submission Structure

Choose one of the following contribution options.

Option 1 – Reproduction Demo (Recommended)

submissions/examples/flip-safari-yourinitials/

├── demo.html
├── style.css
└── README.md

Option 2 – Documentation

submissions/docs/flip-safari-yourinitials/

└── README.md

Note: Replace yourinitials with a unique identifier (for example, flip-safari-ak or flip-safari-vg) to avoid naming conflicts with other contributors.

---

Requirements

• Follow the repository's contributing guidelines.
• Place all files inside the submissions/ directory.
• Use a unique submission folder name.
• Do not modify files inside:
  • core/
  • components/
• If creating a reproduction demo:
  • Build a minimal example demonstrating the Flip animation.
  • Reproduce the Safari rendering issue consistently.
• If creating documentation:
  • Explain the issue in detail.
  • Include reproduction steps.
  • Compare expected and actual behavior.
  • Document Safari version, operating system, and device used.
  • Include observations that may help identify the rendering problem.

---

Acceptance Criteria

• Create a reproduction demo or documentation inside the submissions/ directory.
• Use a unique submission folder name.
• Include a comprehensive README.md.
• Investigate potential GPU acceleration techniques such as transform: translateZ(0).
• Document any improvements using backface-visibility, perspective, transform-style, or will-change.
• Verify that proposed workarounds do not negatively affect Chrome, Firefox, or Edge.
• Include cross-browser testing notes.
• Ensure no files outside the submissions/ directory are modified.
• Do not edit core/ or components/ in accordance with the repository freeze notice.

---

Suggested Implementation

• Create a dedicated submission folder using a unique identifier.
• Build a minimal page demonstrating the Flip animation.
• Test the example across:
  • Safari (macOS)
  • Safari (iOS)
  • Chrome
  • Firefox
  • Edge
• Investigate whether enabling GPU compositing improves rendering by documenting techniques such as:
  • transform: translateZ(0)
  • backface-visibility: hidden
  • transform-style: preserve-3d
  • perspective
  • will-change: transform
• Record browser versions, operating systems, screenshots, or screen recordings (optional) in the README.
• Document any findings that could assist maintainers in implementing a future framework-level fix.

Example folder structure:

submissions/examples/flip-safari-vg/

├── demo.html
├── style.css
└── README.md

---

Testing

• Verify the Flip animation reproduces the issue consistently in Safari.
• Compare rendering with:
  • Safari (macOS)
  • Safari (iOS)
  • Chrome
  • Firefox
  • Edge
• Test any documented GPU acceleration techniques to determine whether they improve animation smoothness.
• Confirm the reproduction steps accurately reflect observed behavior.
• Ensure the Pull Request only adds files inside the submissions/ directory.
• Verify no changes are made to core/ or components/.

---

Benefits

• Provides maintainers with a reliable Safari-specific reproduction.
• Documents browser compatibility issues for future releases.
• Helps identify GPU rendering optimizations without modifying framework code.
• Improves cross-browser animation consistency.
• Enables community contributions while respecting the repository's code freeze policy.

---

Labels

bug browser-compatibility safari animation good first issue

[github-actions]

Hey @Daksh7785! 👋

Thanks for opening this issue — you've been auto-assigned to it.

Before you start coding, please read the quick checklist:

• Make sure no existing issue already covers this idea
• Read the Contribution Guide before opening a PR
• Add files only inside the submissions/ directory (e.g., submissions/examples/your-feature-name/ or submissions/docs/your-feature-name/)
• Include demo.html · style.css · README.md in your folder
• Max 25 active issues per contributor — unassign others before taking new ones
• Join our official Discord Server (Optional - for general developer chat and support; official issues belong on GitHub!)

🕑 Inactivity rule: Issues with no progress for 24 hours (1 day) will be unassigned and reopened for others.

The maintainer will review your PR once submitted. Good luck! ⚡

[SajalRawat]

/claim

[github-actions]

🎉 Assigned! Welcome aboard, @SajalRawat (GSSoC-26)! 🌟

⏳ Timeframe: You have 24 hours of exclusive time to complete the issue and make a Pull Request. Please submit a PR before claiming any other issue.

💡 Tip: Be sure to check out our CONTRIBUTING.md to get off to a great start.

Happy coding! 🚀✨