Static Orrery Elements Disorient After Page Load Due to Animation or Positioning Conflicts

[BackBenchDreamer]

After page load or refresh, the static 3D orrery visualization initially appears correctly positioned and oriented. However, after about a second, the planets and orbit rings become disoriented, moving away from their expected positions. This affects the clarity and usability of the orrery section.

Steps to Reproduce:

1. Load or refresh the page with the orrery visualization.
2. Observe the static orrery positioning during the first second.
3. Notice the shift/disorientation of orbital paths and planets after initial load.

Expected Behavior:

• The orrery planets and orbits remain consistently positioned and oriented.
• Smooth, stable animations without sudden jumps or displacements.

Actual Behavior:

• Correct initial positioning breaks down after a second.
• Visual disorientation of planetary orbits and static elements.

Possible Causes:

• CSS keyframe animations or transitions overriding base positions post-load.
• JavaScript dynamically altering positions conflicting with CSS animations.
• Incorrect or shifting transform-origin or relative positioning on orbit elements.
• Lack of GPU/hardware acceleration properties like will-change causing jitter.

Resolution:

The issue was resolved by replacing the static orrery implementation with the dynamic orrery component instead. This dynamic counterpart uses consistent CSS keyframe animations combined with JavaScript for stable positioning and smooth orbital motion, eliminating the disorientation after page load.

Suggestions:

• Consider migrating to the dynamic orrery for better animation stability.
• Audit CSS animation and JS interactions carefully for static representations.
• Use hardware acceleration hints like will-change and backface-visibility.

Environment:

• Cosmolux project (NASA Space Apps Challenge)
• Browsers tested: Chrome, Firefox (latest versions)
• Operating system: Windows 10 / Mac OS

---