Lagging / low FPS on mobile — game drops below 60 FPS

[weirdcodesofficial]

Summary

The game runs noticeably below 60 FPS on mobile devices (scrolling, animations, and gameplay feel stuttered and laggy). This affects gameplay responsiveness and overall user experience.

Reproduction Steps

1. Open the game on a mobile device (e.g., Android phone, iPhone) using Chrome/Safari.
2. Start a standard play session or load the main gameplay scene.
3. Observe animations, movement, input responsiveness, and overall frame smoothness.

Observed Behavior

• FPS often drops well below 60 (frequent stutters and frame drops).
• Input feels laggy; animations and physics are choppy.

Expected Behavior

• Smooth 60 FPS playback on modern mobile devices where feasible, or graceful degradation with consistent frame pacing.

Environment

• Repository: weirdcodesofficial/MOKSHA
• Languages: JavaScript-heavy game (canvas/WebGL likely), CSS, HTML
• Devices tested (if known): Mobile phones (Android Chrome, iOS Safari)

Frequency

• Happens consistently during gameplay and on scene transitions. More pronounced on lower-end devices.

Potential Causes to Investigate

• Main game loop work per frame is too heavy (large JS computations, physics, or AI running every frame).
• Excessive DOM/CSS layout/reflow on each frame instead of rendering to canvas/WebGL.
• Large or frequent texture uploads, unbatched draw calls, or expensive WebGL state changes.
• High-resolution rendering combined with devicePixelRatio causing oversized framebuffers.
• requestAnimationFrame callbacks doing heavy synchronous work or using setInterval/setTimeout instead.
• Long-running synchronous tasks (promises/loops) blocking the main thread.
• Expensive garbage collection due to many temporary allocations each frame.
• Third-party libraries or analytics causing periodic spikes.
• Lack of FPS/throttling detection on mobile (browser throttles timers when tab backgrounded or during heavy load).

Suggested Investigation & Fixes

• Run Chrome DevTools Performance/Profile on a mobile device (or remote debugging) to identify long tasks and hot functions.
• Measure FPS with performance.now() or use existing in-game FPS counter to log frame times.
• Audit per-frame allocations and reduce object churn (reuse objects, pool allocations).
• Move expensive computations off the main thread (Web Workers) if they don't need DOM access.
• Batch draw calls and minimize texture uploads; reduce canvas resolution or scale down rendering when devicePixelRatio is high.
• Debounce or throttle non-critical updates and animations.
• Ensure requestAnimationFrame is used properly and avoid setInterval for rendering.
• Profile GC to spot allocation spikes; reduce temporary arrays/objects per frame.
• Test with reduced graphics settings or lower asset sizes as an interim mitigation.

What I changed / What I want

• Create an issue to track investigating and fixing mobile performance so we can get closer to 60 FPS on supported devices.

Notes

• If you want, I can add profiling logs or include steps to reproduce with a specific device if you provide device/browser details.