neural-nexus-claude-project/knowledge-base/technical/cross-platform-notes.md

Cross-Platform Compatibility Notes

Browser Support Matrix

Desktop Browsers

Browser	Version	Support Level	Known Issues
Chrome	90+	✅ Full	None
Firefox	88+	✅ Full	None
Safari	14+	✅ Full	Audio context requires user interaction
Edge	90+	✅ Full	None

Mobile Browsers

Browser	Version	Support Level	Known Issues
iOS Safari	14+	✅ Full	Touch event conflicts with scroll
Android Chrome	90+	✅ Full	Performance varies by device
Samsung Internet	13+	⚠️ Limited	Reduced particle effects needed
Firefox Mobile	88+	⚠️ Limited	Performance issues on older devices

Device Testing Results

Desktop Performance

MacBook Pro M1 (2021):
- Chrome: 60fps solid
- Safari: 60fps solid
- Firefox: 58-60fps

Windows 10 (Intel i5-8250U):
- Chrome: 60fps solid
- Edge: 60fps solid
- Firefox: 55-60fps

Ubuntu 20.04 (AMD Ryzen 5):
- Chrome: 60fps solid
- Firefox: 58-60fps

Mobile Performance

iPhone 12 Pro:
- Safari: 50-60fps
- Touch responsiveness: Excellent

iPhone XR:
- Safari: 45-55fps
- Touch responsiveness: Good

Samsung Galaxy S21:
- Chrome: 45-60fps
- Touch responsiveness: Good

Google Pixel 4:
- Chrome: 40-50fps
- Touch responsiveness: Good

Platform-Specific Optimizations

iOS Safari

// Audio context requires user interaction
function initAudioContext() {
  if (audioContext.state === 'suspended') {
    audioContext.resume().then(() => {
      console.log('Audio context resumed');
    });
  }
}

// Call on first touch/click
document.addEventListener('touchstart', initAudioContext, {once: true});

Android Chrome

// Throttle touch events more aggressively
const throttledTouchMove = throttle(handleTouchMove, 33); // 30fps max

Low-End Device Adaptations

// Detect low-end devices and reduce particle count
function detectLowEndDevice() {
  const canvas = document.createElement('canvas');
  const gl = canvas.getContext('webgl');
  
  if (!gl) return true; // No WebGL = low-end
  
  const debugInfo = gl.getExtension('WEBGL_debug_renderer_info');
  if (debugInfo) {
    const renderer = gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL);
    // Check for known low-end GPUs
    return /Mali-400|Adreno 2|PowerVR SGX/.test(renderer);
  }
  
  return false;
}

if (detectLowEndDevice()) {
  gameConfig.maxParticles = 20; // Reduce from 100
  gameConfig.particleLifetime = 1000; // Reduce from 2000
}

Input Handling Compatibility

Touch Events

// Unified touch/mouse handling
function addInputListeners(element) {
  // Mouse events
  element.addEventListener('mousedown', handlePointerStart);
  element.addEventListener('mousemove', handlePointerMove);
  element.addEventListener('mouseup', handlePointerEnd);
  
  // Touch events
  element.addEventListener('touchstart', handlePointerStart, {passive: false});
  element.addEventListener('touchmove', handlePointerMove, {passive: false});
  element.addEventListener('touchend', handlePointerEnd, {passive: false});
}

function handlePointerStart(e) {
  e.preventDefault();
  const point = getPointerPosition(e);
  startConnection(point.x, point.y);
}

function getPointerPosition(e) {
  const rect = canvas.getBoundingClientRect();
  const clientX = e.clientX || (e.touches && e.touches[0].clientX);
  const clientY = e.clientY || (e.touches && e.touches[0].clientY);
  
  return {
    x: clientX - rect.left,
    y: clientY - rect.top
  };
}

Keyboard Support (Future)

// Accessibility keyboard navigation
function addKeyboardSupport() {
  document.addEventListener('keydown', (e) => {
    switch(e.key) {
      case 'Tab':
        e.preventDefault();
        selectNextNode();
        break;
      case 'Enter':
      case ' ':
        e.preventDefault();
        activateSelectedNode();
        break;
      case 'Escape':
        clearSelection();
        break;
    }
  });
}

Canvas Compatibility

High DPI Display Support

function setupHighDPICanvas(canvas) {
  const ctx = canvas.getContext('2d');
  const devicePixelRatio = window.devicePixelRatio || 1;
  const backingStoreRatio = ctx.webkitBackingStorePixelRatio ||
                           ctx.mozBackingStorePixelRatio ||
                           ctx.msBackingStorePixelRatio ||
                           ctx.oBackingStorePixelRatio ||
                           ctx.backingStorePixelRatio || 1;
  
  const ratio = devicePixelRatio / backingStoreRatio;
  
  if (devicePixelRatio !== backingStoreRatio) {
    const oldWidth = canvas.width;
    const oldHeight = canvas.height;
    
    canvas.width = oldWidth * ratio;
    canvas.height = oldHeight * ratio;
    
    canvas.style.width = oldWidth + 'px';
    canvas.style.height = oldHeight + 'px';
    
    ctx.scale(ratio, ratio);
  }
}

Testing Checklist

Manual Testing Protocol

**Desktop Testing:**
- [ ] Chrome (latest): All features work, 60fps
- [ ] Firefox (latest): All features work, 55+fps  
- [ ] Safari (latest): All features work, audio requires interaction
- [ ] Edge (latest): All features work, 60fps

**Mobile Testing:**
- [ ] iPhone Safari: Touch works, 45+fps, audio works after touch
- [ ] Android Chrome: Touch works, 40+fps, all features
- [ ] Tablet (iPad/Android): Landscape/portrait modes work

**Accessibility Testing:**
- [ ] Color contrast meets WCAG AA standards
- [ ] Touch targets minimum 44px
- [ ] Game works without sound (visual feedback sufficient)
- [ ] Clear visual feedback for all interactions

**Performance Testing:**
- [ ] Memory usage stable over 20+ levels
- [ ] No memory leaks detected
- [ ] Frame rate maintained during particle effects
- [ ] Smooth level transitions

Automated Testing Helpers

// Performance monitoring for different platforms
class PlatformMonitor {
  constructor() {
    this.platform = this.detectPlatform();
    this.metrics = [];
  }
  
  detectPlatform() {
    const ua = navigator.userAgent;
    
    if (/iPhone|iPad|iPod/.test(ua)) return 'ios';
    if (/Android/.test(ua)) return 'android';
    if (/Macintosh/.test(ua)) return 'macos';
    if (/Windows/.test(ua)) return 'windows';
    if (/Linux/.test(ua)) return 'linux';
    
    return 'unknown';
  }
  
  logPerformance(fps, memory) {
    this.metrics.push({
      platform: this.platform,
      timestamp: Date.now(),
      fps,
      memory,
      userAgent: navigator.userAgent
    });
    
    // Log to console for debugging
    console.log(`${this.platform}: ${fps}fps, ${memory}MB`);
  }
  
  getAveragePerformance() {
    const recent = this.metrics.slice(-60); // Last 60 measurements
    return {
      avgFps: recent.reduce((sum, m) => sum + m.fps, 0) / recent.length,
      avgMemory: recent.reduce((sum, m) => sum + m.memory, 0) / recent.length
    };
  }
}

Known Issues and Workarounds

iOS Safari Audio Delay

Issue: Audio context suspended until user interaction Workaround: Initialize audio on first touch event

Android Chrome Memory

Issue: Memory usage can grow on older devices Workaround: Implement aggressive garbage collection and object pooling

Firefox Touch Events

Issue: Touch events can conflict with built-in gestures Workaround: Use preventDefault() and passive:false carefully

Edge Canvas Performance

Issue: Slower Canvas 2D performance compared to Chrome Workaround: Reduce particle count automatically on Edge

This document should be updated as new compatibility issues are discovered and resolved.