Browser Compatibility

export function checkBrowserSupport(): { supported: boolean; issues: string[] } {
  const issues: string[] = [];

  // Check WebGL 2
  const canvas = document.createElement('canvas');
  const gl = canvas.getContext('webgl2');
  if (!gl) {
    issues.push('WebGL 2.0 is not supported');
  }

  // Check CSS Custom Properties
  if (!CSS.supports('color', 'var(--test)')) {
    issues.push('CSS Custom Properties are not supported');
  }

  // Check Fetch API
  if (typeof fetch === 'undefined') {
    issues.push('Fetch API is not supported');
  }

  // Check localStorage
  try {
    localStorage.setItem('test', 'test');
    localStorage.removeItem('test');
  } catch {
    issues.push('LocalStorage is not available');
  }

  return {
    supported: issues.length === 0,
    issues,
  };
}

'use client';

import { useEffect, useState } from 'react';
import { checkBrowserSupport } from '@/lib/browser-support';

export function BrowserWarning() {
  const [issues, setIssues] = useState<string[]>([]);

  useEffect(() => {
    const { supported, issues } = checkBrowserSupport();
    if (!supported) {
      setIssues(issues);
    }
  }, []);

  if (issues.length === 0) return null;

  return (
    <div className="fixed top-0 inset-x-0 bg-yellow-500 text-yellow-900 p-4 z-50">
      <p className="font-semibold">Your browser may not fully support this application:</p>
      <ul className="list-disc list-inside mt-2">
        {issues.map((issue) => (
          <li key={issue}>{issue}</li>
        ))}
      </ul>
      <p className="mt-2">Please use a modern browser like Chrome, Firefox, Safari, or Edge.</p>
    </div>
  );
}

/* Fix iOS viewport height */
.full-height {
  height: 100vh;
  height: 100dvh;
}

/* Firefox scrollbar styling */
* {
  scrollbar-width: thin;
  scrollbar-color: hsl(var(--muted)) transparent;
}

useEffect(() => {
  const viewport = window.visualViewport;
  if (viewport) {
    const handleResize = () => {
      document.documentElement.style.setProperty(
        '--viewport-height',
        `${viewport.height}px`
      );
    };
    viewport.addEventListener('resize', handleResize);
    return () => viewport.removeEventListener('resize', handleResize);
  }
}, []);

npm install resize-observer-polyfill

import ResizeObserver from 'resize-observer-polyfill';

if (typeof window !== 'undefined' && !window.ResizeObserver) {
  window.ResizeObserver = ResizeObserver;
}

npm install intersection-observer

import 'intersection-observer';

export function hasWebGLSupport(): boolean {
  try {
    const canvas = document.createElement('canvas');
    return !!(
      window.WebGLRenderingContext &&
      (canvas.getContext('webgl') || canvas.getContext('experimental-webgl'))
    );
  } catch {
    return false;
  }
}

function MapContainer() {
  const [hasWebGL, setHasWebGL] = useState(true);

  useEffect(() => {
    setHasWebGL(hasWebGLSupport());
  }, []);

  if (!hasWebGL) {
    return (
      <div className="h-full flex items-center justify-center bg-muted">
        <div className="text-center p-8">
          <h2 className="text-xl font-semibold">Map Unavailable</h2>
          <p className="text-muted-foreground mt-2">
            Your browser doesn't support WebGL, which is required for the map.
          </p>
          <p className="mt-4">
            <a href="/incidents" className="text-primary underline">
              View incidents as a list instead
            </a>
          </p>
        </div>
      </div>
    );
  }

  return <MapEngine ... />;
}

import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  projects: [
    { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
    { name: 'firefox', use: { ...devices['Desktop Firefox'] } },
    { name: 'webkit', use: { ...devices['Desktop Safari'] } },
    { name: 'mobile-chrome', use: { ...devices['Pixel 5'] } },
    { name: 'mobile-safari', use: { ...devices['iPhone 12'] } },
  ],
});