Handle browser compatibility and frontend quirks

Interview framing: Browser compatibility is a production discipline: know supported browsers, test them, and degrade gracefully when features are missing.

Approach:

1. Define support matrix:

• Which browsers and versions matter for customers?
• Enterprise SaaS products may need stricter support than consumer apps.

2. Detect the class of issue:

• CSS rendering difference.
• Missing JS/Web API.
• Event behavior difference.
• Performance issue on specific hardware/browser.
• Mobile viewport/input quirk.

3. Use compatibility tools:

• BrowserStack/Sauce Labs or real devices.
• MDN/caniuse for feature support.
• DevTools device emulation only as a first pass.

4. Polyfills and transpilation:

• Babel/TypeScript can transpile syntax.
• Polyfills are needed for missing runtime APIs.
• Load only what you need to avoid bundle bloat.

5. Progressive enhancement:

• Use feature detection instead of browser sniffing when possible.
• Provide fallback UI/behavior for unsupported features.

Common examples:

• CSS gap support in older flexbox implementations.
• position: sticky failures inside overflow containers.
• mobile viewport height issues with browser chrome.
• date/input behavior differences.
• passive event listener and scroll performance differences.

Good closing: "I try to fix compatibility with standards-based feature detection and small fallbacks, not browser-specific hacks unless there is no better option."